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

added goerli and sepolia inverse colors (#16928)

Browse Source 
* added goerli and sepolia inverse colors

* updated story

* removed duplication of args

* updated colors in root
This commit is contained in:
Nidhi Kumari 2022-12-15 22:58:30 +05:30 committed by GitHub
parent 0792e4ebbc
commit df73d1887d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 37 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
ui/components/ui/box/box.stories.js
View File

@ -315,11 +315,10 @@ export const Color = (args) => {
padding={3}
color={COLORS.SUCCESS_INVERSE}
backgroundColor={COLORS.SUCCESS_DEFAULT}
{...args}
>
COLORS.SUCCESS_INVERSE
</Box>
<Box {...args} padding={3} color={COLORS.WARNING_DEFAULT} {...args}>
<Box {...args} padding={3} color={COLORS.WARNING_DEFAULT}>
COLORS.WARNING_DEFAULT
</Box>
<Box
@ -327,11 +326,10 @@ export const Color = (args) => {
padding={3}
color={COLORS.WARNING_INVERSE}
backgroundColor={COLORS.WARNING_DEFAULT}
{...args}
>
COLORS.WARNING_INVERSE
</Box>
<Box {...args} padding={3} color={COLORS.INFO_DEFAULT} {...args}>
<Box {...args} padding={3} color={COLORS.INFO_DEFAULT}>
COLORS.INFO_DEFAULT
</Box>
<Box
@ -339,13 +337,28 @@ export const Color = (args) => {
padding={3}
color={COLORS.INFO_INVERSE}
backgroundColor={COLORS.INFO_DEFAULT}
{...args}
>
COLORS.INFO_INVERSE
</Box>
<Box {...args} padding={3} color={COLORS.INHERIT} {...args}>
<Box {...args} padding={3} color={COLORS.INHERIT}>
COLORS.INHERIT
</Box>
<Box
{...args}
padding={3}
backgroundColor={COLORS.SEPOLIA}
color={COLORS.SEPOLIA_INVERSE}
>
COLORS.SEPOLIA_INVERSE
</Box>
<Box
{...args}
padding={3}
backgroundColor={COLORS.GOERLI}
color={COLORS.GOERLI_INVERSE}
>
COLORS.GOERLI_INVERSE
</Box>
</>
);
};
@ -406,6 +419,12 @@ export const BackgroundColor = () => {
COLORS.WARNING_MUTED
</Typography>
</Box>
<Box padding={3} backgroundColor={COLORS.SEPOLIA}>
<Typography color={COLORS.SEPOLIA_INVERSE}>COLORS.SEPOLIA</Typography>
</Box>
<Box padding={3} backgroundColor={COLORS.GOERLI}>
<Typography color={COLORS.GOERLI_INVERSE}>COLORS.GOERLI</Typography>
</Box>
</>
);
};

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

@ -39,6 +39,8 @@ $color-map: (
'mainnet': --mainnet,
'goerli': --color-network-goerli-default,
'sepolia': --color-network-sepolia-default,
'goerli-inverse':--color-network-goerli-inverse,
'sepolia-inverse': --color-network-sepolia-inverse,
'localhost': --color-network-localhost-default,
'transparent': --transparent,
'flask-purple': --color-flask-default,

10
ui/helpers/constants/design-system.js
View File

@ -51,6 +51,8 @@ export const COLORS = {
LOCALHOST: 'localhost',
TRANSPARENT: 'transparent',
INHERIT: 'inherit',
GOERLI_INVERSE: 'goerli-inverse',
SEPOLIA_INVERSE: 'sepolia-inverse',
};
export const BACKGROUND_COLORS = pick(COLORS, [
'BACKGROUND_DEFAULT',
@ -119,6 +121,10 @@ export const TEXT_COLORS = pick(COLORS, [
'INFO_DEFAULT',
'INFO_INVERSE',
'INHERIT',
'GOERLI',
'SEPOLIA',
'GOERLI_INVERSE',
'SEPOLIA_INVERSE',
]);
export const ICON_COLORS = pick(COLORS, [
@ -137,6 +143,10 @@ export const ICON_COLORS = pick(COLORS, [
'INFO_DEFAULT',
'INFO_INVERSE',
'INHERIT',
'GOERLI',
'SEPOLIA',
'GOERLI_INVERSE',
'SEPOLIA_INVERSE',
]);
export const TYPOGRAPHY = {