Updating network colors with design tokens (#16543)

* Updating network colors with design tokens

* Style update to flask page

.storybook/test-data.js

@@ -29,7 +29,7 @@ const state = {
     {
       blockExplorerUrl: 'https://goerli.etherscan.io',
       chainId: '0x5',
-      iconColor: 'var(--goerli)',
+      iconColor: 'var(--color-network-goerli-default)',
       isATestNetwork: true,
       labelKey: 'goerli',
       providerType: 'goerli',
@@ -40,7 +40,7 @@ const state = {
     {
       blockExplorerUrl: 'https://sepolia.etherscan.io',
       chainId: '0xaa36a7',
-      iconColor: 'var(--sepolia)',
+      iconColor: 'var(--color-network-sepolia-default)',
       isATestNetwork: true,
       labelKey: 'sepolia',
       providerType: 'sepolia',
@@ -51,7 +51,7 @@ const state = {
     {
       blockExplorerUrl: '',
       chainId: '0x539',
-      iconColor: 'var(--localhost)',
+      iconColor: 'var(--color-network-localhost-default)',
       isATestNetwork: true,
       label: 'Localhost 8545',
       providerType: 'rpc',
@@ -61,7 +61,7 @@ const state = {
     {
       blockExplorerUrl: 'https://bscscan.com',
       chainId: '0x38',
-      iconColor: 'var(--localhost)',
+      iconColor: 'var(--color-network-localhost-default)',
       isATestNetwork: false,
       label: 'Binance Smart Chain',
       providerType: 'rpc',
@@ -71,7 +71,7 @@ const state = {
     {
       blockExplorerUrl: 'https://cchain.explorer.avax.network/',
       chainId: '0xa86a',
-      iconColor: 'var(--localhost)',
+      iconColor: 'var(--color-network-localhost-default)',
       isATestNetwork: false,
       label: 'Avalanche',
       providerType: 'rpc',
@@ -81,7 +81,7 @@ const state = {
     {
       blockExplorerUrl: 'https://polygonscan.com',
       chainId: '0x89',
-      iconColor: 'var(--localhost)',
+      iconColor: 'var(--color-network-localhost-default)',
       isATestNetwork: false,
       label: 'Polygon',
       providerType: 'rpc',
@@ -381,8 +381,7 @@ const state = {
           from: '0x64a845a5b02460acf8a3d84503b0d68d028b4bb4',
           to: '0xaD6D458402F60fD3Bd25163575031ACDce07538D',
           value: '0x0',
-          data:
+          data: '0xa9059cbb000000000000000000000000b19ac54efa18cc3a14a5b821bfec73d284bf0c5e0000000000000000000000000000000000000000000000003782dace9d900000',
-            '0xa9059cbb000000000000000000000000b19ac54efa18cc3a14a5b821bfec73d284bf0c5e0000000000000000000000000000000000000000000000003782dace9d900000',
           gas: '0xcb28',
           gasPrice: '0x77359400',
         },
@@ -401,8 +400,7 @@ const state = {
               from: '0x64a845a5b02460acf8a3d84503b0d68d028b4bb4',
               to: '0xaD6D458402F60fD3Bd25163575031ACDce07538D',
               value: '0x0',
-              data:
+              data: '0xa9059cbb000000000000000000000000b19ac54efa18cc3a14a5b821bfec73d284bf0c5e0000000000000000000000000000000000000000000000003782dace9d900000',
-                '0xa9059cbb000000000000000000000000b19ac54efa18cc3a14a5b821bfec73d284bf0c5e0000000000000000000000000000000000000000000000003782dace9d900000',
               gas: '0xcb28',
               gasPrice: '0x77359400',
             },
@@ -582,8 +580,7 @@ const state = {
         chainId: '0x38',
         dappSuggestedGasFees: null,
         firstRetryBlockNumber: '0x9c2686',
-        hash:
+        hash: '0xf45e7a751adfc0fbadccc972816baf33eb34543e52ace51f0f8d0d7f357afdc6',
-          '0xf45e7a751adfc0fbadccc972816baf33eb34543e52ace51f0f8d0d7f357afdc6',
         history: [
           {
             chainId: '0x38',
@@ -595,8 +592,7 @@ const state = {
             status: 'unapproved',
             time: 1629582710520,
             txParams: {
-              data:
+              data: '0xa9059cbb0000000000000000000000004ef2d5a1d056e7c9e8bcdbf2bd9ac0df749a1c2900000000000000000000000000000000000000000000000029a2241af62c0000',
-                '0xa9059cbb0000000000000000000000004ef2d5a1d056e7c9e8bcdbf2bd9ac0df749a1c2900000000000000000000000000000000000000000000000029a2241af62c0000',
               from: '0x17f62b1b2407c41c43e14da0699d6b4b0a521548',
               gas: '0x2eb27',
               gasPrice: '0x12a05f200',
@@ -780,8 +776,7 @@ const state = {
                     blockHash:
                       '0x30bf5dfa12e460a5d121267c00ba3047a14ba286e0c4fe75fa979010f527cba0',
                     blockNumber: '9c2688',
-                    data:
+                    data: '0x00000000000000000000000000000000000000000000000028426c213d688000',
-                      '0x00000000000000000000000000000000000000000000000028426c213d688000',
                     logIndex: '245',
                     removed: false,
                     topics: [
@@ -798,8 +793,7 @@ const state = {
                     blockHash:
                       '0x30bf5dfa12e460a5d121267c00ba3047a14ba286e0c4fe75fa979010f527cba0',
                     blockNumber: '9c2688',
-                    data:
+                    data: '0x000000000000000000000000000000000000000000000000006a94d74f430000',
-                      '0x000000000000000000000000000000000000000000000000006a94d74f430000',
                     logIndex: '246',
                     removed: false,
                     topics: [
@@ -816,8 +810,7 @@ const state = {
                     blockHash:
                       '0x30bf5dfa12e460a5d121267c00ba3047a14ba286e0c4fe75fa979010f527cba0',
                     blockNumber: '9c2688',
-                    data:
+                    data: '0x000000000000000000000000000000000000000000000000001ff973cafa8000',
-                      '0x000000000000000000000000000000000000000000000000001ff973cafa8000',
                     logIndex: '247',
                     removed: false,
                     topics: [
@@ -941,8 +934,7 @@ const state = {
         submittedTime: 1629582711337,
         time: 1629582710520,
         txParams: {
-          data:
+          data: '0xa9059cbb0000000000000000000000004ef2d5a1d056e7c9e8bcdbf2bd9ac0df749a1c2900000000000000000000000000000000000000000000000029a2241af62c0000',
-            '0xa9059cbb0000000000000000000000004ef2d5a1d056e7c9e8bcdbf2bd9ac0df749a1c2900000000000000000000000000000000000000000000000029a2241af62c0000',
           from: '0x17f62b1b2407c41c43e14da0699d6b4b0a521548',
           gas: '0x2eb27',
           gasPrice: '0x12a05f200',
@@ -980,8 +972,7 @@ const state = {
                 red: null,
                 words: [10233480, null],
               },
-              data:
+              data: '0x00000000000000000000000000000000000000000000000028426c213d688000',
-                '0x00000000000000000000000000000000000000000000000028426c213d688000',
               logIndex: {
                 length: 1,
                 negative: 0,
@@ -1013,8 +1004,7 @@ const state = {
                 red: null,
                 words: [10233480, null],
               },
-              data:
+              data: '0x000000000000000000000000000000000000000000000000006a94d74f430000',
-                '0x000000000000000000000000000000000000000000000000006a94d74f430000',
               logIndex: {
                 length: 1,
                 negative: 0,
@@ -1046,8 +1036,7 @@ const state = {
                 red: null,
                 words: [10233480, null],
               },
-              data:
+              data: '0x000000000000000000000000000000000000000000000000001ff973cafa8000',
-                '0x000000000000000000000000000000000000000000000000001ff973cafa8000',
               logIndex: {
                 length: 1,
                 negative: 0,
@@ -1224,8 +1213,7 @@ const state = {
           to: '0x045c619e4d29bba3b92769508831b681b83d6a96',
           value: '0xbca9bce4d98ca3',
         },
-        hash:
+        hash: '0x2de9256a7c604586f7ecfd87ae9509851e217f588f9f85feed793c54ed2ce0aa',
-          '0x2de9256a7c604586f7ecfd87ae9509851e217f588f9f85feed793c54ed2ce0aa',
         transactionCategory: 'incoming',
       },
       '0x320a1fd769373578f78570e5d8f56e89bc7bce9657bb5f4c12d8fe790d471bfd': {
@@ -1242,8 +1230,7 @@ const state = {
           to: '0x045c619e4d29bba3b92769508831b681b83d6a96',
           value: '0xcdb08ab4254000',
         },
-        hash:
+        hash: '0x320a1fd769373578f78570e5d8f56e89bc7bce9657bb5f4c12d8fe790d471bfd',
-          '0x320a1fd769373578f78570e5d8f56e89bc7bce9657bb5f4c12d8fe790d471bfd',
         transactionCategory: 'incoming',
       },
       '0x8add6c1ea089a8de9b15fa2056b1875360f17916755c88ace9e5092b7a4b1239': {
@@ -1260,8 +1247,7 @@ const state = {
           to: '0x045c619e4d29bba3b92769508831b681b83d6a96',
           value: '0xe6ed27d6668000',
         },
-        hash:
+        hash: '0x8add6c1ea089a8de9b15fa2056b1875360f17916755c88ace9e5092b7a4b1239',
-          '0x8add6c1ea089a8de9b15fa2056b1875360f17916755c88ace9e5092b7a4b1239',
         transactionCategory: 'incoming',
       },
       '0x50be62ab1cabd03ff104c602c11fdef7a50f3d73c55006d5583ba97950ab1144': {
@@ -1278,8 +1264,7 @@ const state = {
           to: '0x045c619e4d29bba3b92769508831b681b83d6a96',
           value: '0x63eb89da4ed00000',
         },
-        hash:
+        hash: '0x50be62ab1cabd03ff104c602c11fdef7a50f3d73c55006d5583ba97950ab1144',
-          '0x50be62ab1cabd03ff104c602c11fdef7a50f3d73c55006d5583ba97950ab1144',
         transactionCategory: 'incoming',
       },
     },
@@ -1512,8 +1497,7 @@ const state = {
         from: '0x64a845a5b02460acf8a3d84503b0d68d028b4bb4',
         to: '0xaD6D458402F60fD3Bd25163575031ACDce07538D',
         value: '0x0',
-        data:
+        data: '0x095ea7b30000000000000000000000009bc5baf874d2da8d216ae9f137804184ee5afef40000000000000000000000000000000000000000000000000000000000011170',
-          '0x095ea7b30000000000000000000000009bc5baf874d2da8d216ae9f137804184ee5afef40000000000000000000000000000000000000000000000000000000000011170',
         gas: '0xea60',
         gasPrice: '0x4a817c800',
       },
@@ -1532,8 +1516,7 @@ const state = {
             from: '0x983211ce699ea5ab57cc528086154b6db1ad8e55',
             to: '0xaD6D458402F60fD3Bd25163575031ACDce07538D',
             value: '0x0',
-            data:
+            data: '0x095ea7b30000000000000000000000009bc5baf874d2da8d216ae9f137804184ee5afef40000000000000000000000000000000000000000000000000000000000011170',
-              '0x095ea7b30000000000000000000000009bc5baf874d2da8d216ae9f137804184ee5afef40000000000000000000000000000000000000000000000000000000000011170',
             gas: '0xea60',
             gasPrice: '0x4a817c800',
           },

ui/components/app/flask/experimental-area/index.scss

@@ -1,5 +1,5 @@
 .experimental-area {
-  color: var(--flask-purple);
+  color: var(--color-flask-default);
   margin: auto;
   display: flex;
   flex-direction: column;
@@ -46,9 +46,9 @@
   }
 
   button {
-    background-color: var(--flask-purple) !important;
+    background-color: var(--color-flask-default) !important;
     border: 0 !important;
-    color: var(--color-primary-inverse); //@TODO: We don't have a generic inverse color, using this one for now
+    color: var(--color-flask-inverse);
     width: 200px;
   }
 }

ui/css/design-system/colors.scss

@@ -37,10 +37,10 @@ $color-map: (
   'info-inverse': --color-info-inverse,
   'info-disabled': --color-info-disabled,
   'mainnet': --mainnet,
-  'goerli': --goerli,
+  'goerli': --color-network-goerli-default,
-  'sepolia': --sepolia,
+  'sepolia': --color-network-sepolia-default,
-  'localhost': --localhost,
+  'localhost': --color-network-localhost-default,
   'transparent': --transparent,
-  'flask-purple': --flask-purple,
+  'flask-purple': --color-flask-default,
   'inherit': --inherit,
 );

ui/css/utilities/colors.scss

@@ -2,13 +2,8 @@
   // Accents
   // Everything below this line is part of the new color system
   --mainnet: #29b6af;
-  --goerli: #3099f2;
-  --sepolia: #cfb5f0;
-  --localhost: #bbc0c5;
-  --flask-purple: #8b45b6;
   --inherit: inherit;
   --transparent: transparent;
-
   // DO NOT CHANGE
   // Required for the QR reader to work properly
   --qr-code-white-background: #fff;