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

Updating network colors with design tokens (#16543)

Browse Source 
* Updating network colors with design tokens

* Style update to flask page
This commit is contained in:
George Marshall 2022-11-17 15:30:04 -08:00 committed by GitHub
parent 653031b909
commit 4c809a339d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 31 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
.storybook/test-data.js
View File

@ -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',
@ -142,7 +142,7 @@ const state = {
iconUrl:
'https://assets.coingecko.com/coins/images/12256/thumb/falconswap.png?1598534184',
aggregators: ['CoinGecko', '1inch', 'Lifi'],
occurrences:3,
occurrences: 3,
unlisted: false,
},
'0xc011a73ee8576fb46f5e1c5751ca3b9fe0af2a6f': {
@ -381,8 +381,7 @@ const state = {
from: '0x64a845a5b02460acf8a3d84503b0d68d028b4bb4',
to: '0xaD6D458402F60fD3Bd25163575031ACDce07538D',
value: '0x0',
data:
'0xa9059cbb000000000000000000000000b19ac54efa18cc3a14a5b821bfec73d284bf0c5e0000000000000000000000000000000000000000000000003782dace9d900000',
data: '0xa9059cbb000000000000000000000000b19ac54efa18cc3a14a5b821bfec73d284bf0c5e0000000000000000000000000000000000000000000000003782dace9d900000',
gas: '0xcb28',
gasPrice: '0x77359400',
},
@ -401,8 +400,7 @@ const state = {
from: '0x64a845a5b02460acf8a3d84503b0d68d028b4bb4',
to: '0xaD6D458402F60fD3Bd25163575031ACDce07538D',
value: '0x0',
data:
'0xa9059cbb000000000000000000000000b19ac54efa18cc3a14a5b821bfec73d284bf0c5e0000000000000000000000000000000000000000000000003782dace9d900000',
data: '0xa9059cbb000000000000000000000000b19ac54efa18cc3a14a5b821bfec73d284bf0c5e0000000000000000000000000000000000000000000000003782dace9d900000',
gas: '0xcb28',
gasPrice: '0x77359400',
},
@ -582,8 +580,7 @@ const state = {
chainId: '0x38',
dappSuggestedGasFees: null,
firstRetryBlockNumber: '0x9c2686',
hash:
'0xf45e7a751adfc0fbadccc972816baf33eb34543e52ace51f0f8d0d7f357afdc6',
hash: '0xf45e7a751adfc0fbadccc972816baf33eb34543e52ace51f0f8d0d7f357afdc6',
history: [
{
chainId: '0x38',
@ -595,8 +592,7 @@ const state = {
status: 'unapproved',
time: 1629582710520,
txParams: {
data:
'0xa9059cbb0000000000000000000000004ef2d5a1d056e7c9e8bcdbf2bd9ac0df749a1c2900000000000000000000000000000000000000000000000029a2241af62c0000',
data: '0xa9059cbb0000000000000000000000004ef2d5a1d056e7c9e8bcdbf2bd9ac0df749a1c2900000000000000000000000000000000000000000000000029a2241af62c0000',
from: '0x17f62b1b2407c41c43e14da0699d6b4b0a521548',
gas: '0x2eb27',
gasPrice: '0x12a05f200',
@ -780,8 +776,7 @@ const state = {
blockHash:
'0x30bf5dfa12e460a5d121267c00ba3047a14ba286e0c4fe75fa979010f527cba0',
blockNumber: '9c2688',
data:
'0x00000000000000000000000000000000000000000000000028426c213d688000',
data: '0x00000000000000000000000000000000000000000000000028426c213d688000',
logIndex: '245',
removed: false,
topics: [
@ -798,8 +793,7 @@ const state = {
blockHash:
'0x30bf5dfa12e460a5d121267c00ba3047a14ba286e0c4fe75fa979010f527cba0',
blockNumber: '9c2688',
data:
'0x000000000000000000000000000000000000000000000000006a94d74f430000',
data: '0x000000000000000000000000000000000000000000000000006a94d74f430000',
logIndex: '246',
removed: false,
topics: [
@ -816,8 +810,7 @@ const state = {
blockHash:
'0x30bf5dfa12e460a5d121267c00ba3047a14ba286e0c4fe75fa979010f527cba0',
blockNumber: '9c2688',
data:
'0x000000000000000000000000000000000000000000000000001ff973cafa8000',
data: '0x000000000000000000000000000000000000000000000000001ff973cafa8000',
logIndex: '247',
removed: false,
topics: [
@ -941,8 +934,7 @@ const state = {
submittedTime: 1629582711337,
time: 1629582710520,
txParams: {
data:
'0xa9059cbb0000000000000000000000004ef2d5a1d056e7c9e8bcdbf2bd9ac0df749a1c2900000000000000000000000000000000000000000000000029a2241af62c0000',
data: '0xa9059cbb0000000000000000000000004ef2d5a1d056e7c9e8bcdbf2bd9ac0df749a1c2900000000000000000000000000000000000000000000000029a2241af62c0000',
from: '0x17f62b1b2407c41c43e14da0699d6b4b0a521548',
gas: '0x2eb27',
gasPrice: '0x12a05f200',
@ -980,8 +972,7 @@ const state = {
red: null,
words: [10233480, null],
},
data:
'0x00000000000000000000000000000000000000000000000028426c213d688000',
data: '0x00000000000000000000000000000000000000000000000028426c213d688000',
logIndex: {
length: 1,
negative: 0,
@ -1013,8 +1004,7 @@ const state = {
red: null,
words: [10233480, null],
},
data:
'0x000000000000000000000000000000000000000000000000006a94d74f430000',
data: '0x000000000000000000000000000000000000000000000000006a94d74f430000',
logIndex: {
length: 1,
negative: 0,
@ -1046,8 +1036,7 @@ const state = {
red: null,
words: [10233480, null],
},
data:
'0x000000000000000000000000000000000000000000000000001ff973cafa8000',
data: '0x000000000000000000000000000000000000000000000000001ff973cafa8000',
logIndex: {
length: 1,
negative: 0,
@ -1224,8 +1213,7 @@ const state = {
to: '0x045c619e4d29bba3b92769508831b681b83d6a96',
value: '0xbca9bce4d98ca3',
},
hash:
'0x2de9256a7c604586f7ecfd87ae9509851e217f588f9f85feed793c54ed2ce0aa',
hash: '0x2de9256a7c604586f7ecfd87ae9509851e217f588f9f85feed793c54ed2ce0aa',
transactionCategory: 'incoming',
},
'0x320a1fd769373578f78570e5d8f56e89bc7bce9657bb5f4c12d8fe790d471bfd': {
@ -1242,8 +1230,7 @@ const state = {
to: '0x045c619e4d29bba3b92769508831b681b83d6a96',
value: '0xcdb08ab4254000',
},
hash:
'0x320a1fd769373578f78570e5d8f56e89bc7bce9657bb5f4c12d8fe790d471bfd',
hash: '0x320a1fd769373578f78570e5d8f56e89bc7bce9657bb5f4c12d8fe790d471bfd',
transactionCategory: 'incoming',
},
'0x8add6c1ea089a8de9b15fa2056b1875360f17916755c88ace9e5092b7a4b1239': {
@ -1260,8 +1247,7 @@ const state = {
to: '0x045c619e4d29bba3b92769508831b681b83d6a96',
value: '0xe6ed27d6668000',
},
hash:
'0x8add6c1ea089a8de9b15fa2056b1875360f17916755c88ace9e5092b7a4b1239',
hash: '0x8add6c1ea089a8de9b15fa2056b1875360f17916755c88ace9e5092b7a4b1239',
transactionCategory: 'incoming',
},
'0x50be62ab1cabd03ff104c602c11fdef7a50f3d73c55006d5583ba97950ab1144': {
@ -1278,8 +1264,7 @@ const state = {
to: '0x045c619e4d29bba3b92769508831b681b83d6a96',
value: '0x63eb89da4ed00000',
},
hash:
'0x50be62ab1cabd03ff104c602c11fdef7a50f3d73c55006d5583ba97950ab1144',
hash: '0x50be62ab1cabd03ff104c602c11fdef7a50f3d73c55006d5583ba97950ab1144',
transactionCategory: 'incoming',
},
},
@ -1512,8 +1497,7 @@ const state = {
from: '0x64a845a5b02460acf8a3d84503b0d68d028b4bb4',
to: '0xaD6D458402F60fD3Bd25163575031ACDce07538D',
value: '0x0',
data:
'0x095ea7b30000000000000000000000009bc5baf874d2da8d216ae9f137804184ee5afef40000000000000000000000000000000000000000000000000000000000011170',
data: '0x095ea7b30000000000000000000000009bc5baf874d2da8d216ae9f137804184ee5afef40000000000000000000000000000000000000000000000000000000000011170',
gas: '0xea60',
gasPrice: '0x4a817c800',
},
@ -1532,8 +1516,7 @@ const state = {
from: '0x983211ce699ea5ab57cc528086154b6db1ad8e55',
to: '0xaD6D458402F60fD3Bd25163575031ACDce07538D',
value: '0x0',
data:
'0x095ea7b30000000000000000000000009bc5baf874d2da8d216ae9f137804184ee5afef40000000000000000000000000000000000000000000000000000000000011170',
data: '0x095ea7b30000000000000000000000009bc5baf874d2da8d216ae9f137804184ee5afef40000000000000000000000000000000000000000000000000000000000011170',
gas: '0xea60',
gasPrice: '0x4a817c800',
},

6
ui/components/app/flask/experimental-area/index.scss
View File

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

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

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

5
ui/css/utilities/colors.scss
View File

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