m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-11-22 09:57:02 +01:00
Code

Updating colors in various components js and css (#13831)

Browse Source
This commit is contained in:
George Marshall 2022-03-04 08:47:32 -08:00 committed by GitHub
parent 718d84b211
commit 395806943f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
22 changed files with 153 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
ui/components/app/flask/snap-settings-card/snap-settings-card.js
View File

@ -33,10 +33,10 @@ const STATUSES = {
};
const STATUS_COLORS = {
[STATUSES.INSTALLING]: COLORS.ALERT1,
[STATUSES.RUNNING]: COLORS.SUCCESS1,
[STATUSES.STOPPED]: COLORS.UI4,
[STATUSES.CRASHED]: COLORS.ERROR1,
[STATUSES.INSTALLING]: COLORS.WARNING_DEFAULT,
[STATUSES.RUNNING]: COLORS.SUCCESS_DEFAULT,
[STATUSES.STOPPED]: COLORS.ICON_MUTED,
[STATUSES.CRASHED]: COLORS.ERROR_DEFAULT,
};
const SnapSettingsCard = ({
@ -81,7 +81,7 @@ const SnapSettingsCard = ({
marginTop: 0,
marginBottom: 0,
}}
color={COLORS.BLACK}
color={COLORS.TEXT_DEFAULT}
variant={TYPOGRAPHY.H4}
fontWeight={FONT_WEIGHT.BOLD}
className="snap-settings-card__title"
@ -101,7 +101,7 @@ const SnapSettingsCard = ({
</Box>
<Typography
variant={TYPOGRAPHY.Paragraph}
color={COLORS.UI4}
color={COLORS.TEXT_ALTERNATIVE}
fontWeight={FONT_WEIGHT.NORMAL}
className="snap-settings-card__body"
boxProps={{
@ -141,10 +141,10 @@ const SnapSettingsCard = ({
}
label={status}
labelProps={{
color: COLORS.UI4,
color: COLORS.TEXT_ALTERNATIVE,
margin: [0, 1],
}}
backgroundColor={COLORS.UI1}
backgroundColor={COLORS.BACKGROUND_ALTERNATIVE}
className="snap-settings-card__chip"
{...chipProps}
/>
@ -158,7 +158,7 @@ const SnapSettingsCard = ({
boxProps={{
margin: [0, 0],
}}
color={COLORS.UI3}
color={COLORS.TEXT_MUTED}
variant={TYPOGRAPHY.H8}
fontWeight={FONT_WEIGHT.NORMAL}
tag="span"
@ -173,7 +173,7 @@ const SnapSettingsCard = ({
paddingLeft: 2,
margin: [0, 0],
}}
color={COLORS.UI4}
color={COLORS.TEXT_MUTED}
variant={TYPOGRAPHY.H7}
fontWeight={FONT_WEIGHT.NORMAL}
align={TEXT_ALIGN.CENTER}

4
ui/components/app/flask/snaps-authorship-pill/index.scss
View File

@ -6,11 +6,11 @@
&:hover,
&:focus {
.chip {
background-color: var(--ui-1);
background-color: var(--color-background-alternative);
}
}
}
.snaps-authorship-icon {
color: var(--ui-4);
color: var(--color-icon-default);
}

4
ui/components/app/flask/snaps-authorship-pill/snaps-authorship-pill.js
View File

@ -23,13 +23,13 @@ const SnapsAuthorshipPill = ({ packageName, className, url }) => {
<i className="fab fa-npm fa-lg snaps-authorship-icon" />
</Box>
}
backgroundColor={COLORS.WHITE}
backgroundColor={COLORS.BACKGROUND_DEFAULT}
>
<Typography
className="chip__label"
variant={TYPOGRAPHY.H7}
tag="span"
color={COLORS.UI4}
color={COLORS.TEXT_ALTERNATIVE}
>
{packageName}
</Typography>

78
ui/components/ui/box/box.js
View File

@ -30,6 +30,80 @@ const ValidSize = PropTypes.oneOf([
12,
'auto',
]);
export const ValidBackgroundColors = [
COLORS.BACKGROUND_DEFAULT,
COLORS.BACKGROUND_ALTERNATIVE,
COLORS.OVERLAY_DEFAULT,
COLORS.PRIMARY_DEFAULT,
COLORS.PRIMARY_ALTERNATIVE,
COLORS.PRIMARY_MUTED,
COLORS.PRIMARY_DISABLED,
COLORS.SECONDARY_DEFAULT,
COLORS.SECONDARY_ALTERNATIVE,
COLORS.SECONDARY_MUTED,
COLORS.SECONDARY_DISABLED,
COLORS.ERROR_DEFAULT,
COLORS.ERROR_ALTERNATIVE,
COLORS.ERROR_MUTED,
COLORS.ERROR_DISABLED,
COLORS.WARNING_DEFAULT,
COLORS.WARNING_ALTERNATIVE,
COLORS.WARNING_MUTED,
COLORS.WARNING_DISABLED,
COLORS.SUCCESS_DEFAULT,
COLORS.SUCCESS_ALTERNATIVE,
COLORS.SUCCESS_MUTED,
COLORS.SUCCESS_DISABLED,
COLORS.INFO_DEFAULT,
COLORS.INFO_ALTERNATIVE,
COLORS.INFO_MUTED,
COLORS.INFO_DISABLED,
COLORS.MAINNET,
COLORS.ROPSTEN,
COLORS.KOVAN,
COLORS.RINKEBY,
COLORS.GOERLI,
COLORS.TRANSPARENT,
COLORS.LOCALHOST,
];
export const ValidBorderColors = [
COLORS.BORDER_DEFAULT,
COLORS.BORDER_MUTED,
COLORS.PRIMARY_DEFAULT,
COLORS.PRIMARY_ALTERNATIVE,
COLORS.PRIMARY_MUTED,
COLORS.PRIMARY_DISABLED,
COLORS.SECONDARY_DEFAULT,
COLORS.SECONDARY_ALTERNATIVE,
COLORS.SECONDARY_MUTED,
COLORS.SECONDARY_DISABLED,
COLORS.ERROR_DEFAULT,
COLORS.ERROR_ALTERNATIVE,
COLORS.ERROR_MUTED,
COLORS.ERROR_DISABLED,
COLORS.WARNING_DEFAULT,
COLORS.WARNING_ALTERNATIVE,
COLORS.WARNING_MUTED,
COLORS.WARNING_DISABLED,
COLORS.SUCCESS_DEFAULT,
COLORS.SUCCESS_ALTERNATIVE,
COLORS.SUCCESS_MUTED,
COLORS.SUCCESS_DISABLED,
COLORS.INFO_DEFAULT,
COLORS.INFO_ALTERNATIVE,
COLORS.INFO_MUTED,
COLORS.INFO_DISABLED,
COLORS.MAINNET,
COLORS.ROPSTEN,
COLORS.KOVAN,
COLORS.RINKEBY,
COLORS.GOERLI,
COLORS.TRANSPARENT,
COLORS.LOCALHOST,
];
const ArrayOfValidSizes = PropTypes.arrayOf(ValidSize);
export const MultipleSizes = PropTypes.oneOfType([
ValidSize,
@ -180,7 +254,7 @@ Box.propTypes = {
paddingBottom: ValidSize,
paddingRight: ValidSize,
paddingLeft: ValidSize,
borderColor: PropTypes.oneOf(Object.values(COLORS)),
borderColor: PropTypes.oneOf(Object.values(ValidBorderColors)),
borderWidth: PropTypes.number,
borderRadius: PropTypes.oneOf(Object.values(SIZES)),
borderStyle: PropTypes.oneOf(Object.values(BORDER_STYLE)),
@ -190,6 +264,6 @@ Box.propTypes = {
display: PropTypes.oneOf(Object.values(DISPLAY)),
width: PropTypes.oneOf(Object.values(BLOCK_SIZES)),
height: PropTypes.oneOf(Object.values(BLOCK_SIZES)),
backgroundColor: PropTypes.oneOf(Object.values(COLORS)),
backgroundColor: PropTypes.oneOf(Object.values(ValidBackgroundColors)),
className: PropTypes.string,
};

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

@ -10,9 +10,11 @@ import {
} from '../../../helpers/constants/design-system';
import Typography from '../typography';
import Box from './box';
import README from './README.mdx';
import { ValidBackgroundColors, ValidBorderColors } from '.';
const sizeKnobOptions = [undefined, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
const marginSizeKnobOptions = [...sizeKnobOptions, 'auto'];
@ -56,14 +58,14 @@ export default {
table: { category: 'display' },
},
backgroundColor: {
options: Object.values(COLORS),
options: ValidBackgroundColors,
control: 'select',
table: {
category: 'background',
},
},
borderColor: {
options: Object.values(COLORS),
options: ValidBorderColors,
control: 'select',
defaultValue: COLORS.BORDER_DEFAULT,
table: { category: 'border' },

7
ui/components/ui/box/index.js
View File

@ -1 +1,6 @@
export { default, MultipleSizes } from './box';
export {
default,
MultipleSizes,
ValidBackgroundColors,
ValidBorderColors,
} from './box';

7
ui/components/ui/callout/callout.js
View File

@ -2,8 +2,9 @@ import React, { useEffect, useState } from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import InfoIconInverted from '../icon/info-icon-inverted.component';
import { SEVERITIES } from '../../../helpers/constants/design-system';
import { SEVERITIES, COLORS } from '../../../helpers/constants/design-system';
import { MILLISECOND } from '../../../../shared/constants/time';
import Typography from '../typography';
export default function Callout({
severity,
@ -36,7 +37,9 @@ export default function Callout({
return (
<div className={calloutClassName}>
<InfoIconInverted severity={severity} />
<div className="callout__content">{children}</div>
<Typography color={COLORS.TEXT_DEFAULT} className="callout__content">
{children}
</Typography>
{dismiss && (
<i
onClick={() => {

12
ui/components/ui/callout/callout.scss
View File

@ -10,12 +10,12 @@
transition: opacity 0.75s 0s;
a {
color: var(--primary-1);
color: var(--color-primary-default);
}
&--dismissible {
&#{$self}--first {
box-shadow: 0 -5px 5px -5px rgba(0, 0, 0, 0.18);
box-shadow: 0 -5px 5px -5px var(--color-overlay-default);
}
}
@ -37,19 +37,19 @@
}
&--warning {
border-left: 2px solid var(--alert-1);
border-left: 2px solid var(--color-warning-default);
}
&--danger {
border-left: 2px solid var(--error-1);
border-left: 2px solid var(--color-error-default);
}
&--info {
border-left: 2px solid var(--primary-1);
border-left: 2px solid var(--color-info-default);
}
&--success {
border-left: 2px solid var(--success-1);
border-left: 2px solid var(--color-success-default);
}
& .info-icon {

6
ui/components/ui/callout/callout.stories.js
View File

@ -22,7 +22,7 @@ export default {
};
export const PersistentCallout = (args) => (
<Box borderColor={COLORS.UI2} padding={[8, 0, 0, 0]}>
<Box borderColor={COLORS.BORDER_DEFAULT} padding={[8, 0, 0, 0]}>
<Box margin={2}>
<Typography variant={TYPOGRAPHY.H4}>This is your private key:</Typography>
<Typography variant={TYPOGRAPHY.H6}>
@ -36,7 +36,7 @@ export const PersistentCallout = (args) => (
export const DismissibleCallout = (args) => {
const [dismissed, setDismissed] = useState(false);
return (
<Box borderColor={COLORS.UI2} padding={[8, 0, 0, 0]}>
<Box borderColor={COLORS.BORDER_DEFAULT} padding={[8, 0, 0, 0]}>
<Box margin={2}>
<Typography variant={TYPOGRAPHY.H4}>
This is your private key:
@ -81,7 +81,7 @@ export const MultipleDismissibleCallouts = () => {
};
return (
<Box borderColor={COLORS.UI2} padding={[8, 0, 0, 0]}>
<Box borderColor={COLORS.BORDER_DEFAULT} padding={[8, 0, 0, 0]}>
<Box margin={2}>
<Typography variant={TYPOGRAPHY.H4}>
This is your private key:

2
ui/components/ui/card/README.mdx
View File

@ -38,5 +38,5 @@ import { COLORS } from '../../../helpers/constants/design-system';
// All padding related props of the Box component will work
// To change the background color
<Card backgroundColor={COLORS.UI4} />
<Card backgroundColor={COLORS.BACKGROUND_ALTERNATIVE} />
```

4
ui/components/ui/card/card.js
View File

@ -11,12 +11,12 @@ import {
const Card = ({
border = true,
padding = 4,
backgroundColor = COLORS.WHITE,
backgroundColor = COLORS.BACKGROUND_DEFAULT,
children,
...props
}) => {
const defaultBorderProps = {
borderColor: border && COLORS.UI2,
borderColor: border && COLORS.BORDER_MUTED,
borderRadius: border && SIZES.MD,
borderStyle: border && BORDER_STYLE.SOLID,
};

2
ui/components/ui/chip/chip-with-input.js
View File

@ -7,7 +7,7 @@ import Chip from '.';
export function ChipWithInput({
dataTestId,
className,
borderColor = COLORS.UI1,
borderColor = COLORS.BORDER_DEFAULT,
inputValue,
setInputValue,
}) {

4
ui/components/ui/chip/chip.js
View File

@ -9,7 +9,7 @@ export default function Chip({
dataTestId,
className,
children,
borderColor = COLORS.UI1,
borderColor = COLORS.BORDER_DEFAULT,
backgroundColor,
label,
labelProps = {},
@ -47,7 +47,7 @@ export default function Chip({
className="chip__label"
variant={TYPOGRAPHY.H6}
tag="span"
color={COLORS.UI4}
color={COLORS.TEXT_ALTERNATIVE}
{...labelProps}
>
{label}

3
ui/components/ui/chip/chip.scss
View File

@ -4,7 +4,7 @@
$self: &;
border-radius: 100px;
border: 1px solid var(--ui-1);
border: 1px solid var(--color-border-default);
padding: 8px 16px;
margin: 0 4px;
display: flex;
@ -46,6 +46,7 @@
text-align: center;
width: 100%;
font-size: design-system.$font-size-h5;
color: var(--color-text-default);
&:focus {
text-align: left;

42
ui/components/ui/chip/chip.stories.js
View File

@ -1,8 +1,13 @@
import React, { useState } from 'react';
import { COLORS, TYPOGRAPHY } from '../../../helpers/constants/design-system';
import {
COLORS,
TYPOGRAPHY,
SEVERITIES,
} from '../../../helpers/constants/design-system';
import ApproveIcon from '../icon/approve-icon.component';
import InfoIcon from '../icon/info-icon.component';
import Identicon from '../identicon/identicon.component';
import { ChipWithInput } from './chip-with-input';
@ -26,7 +31,9 @@ export default {
},
options: ['ApproveIcon'],
mapping: {
ApproveIcon: <ApproveIcon size={24} color="#4cd964" />,
ApproveIcon: (
<ApproveIcon size={24} color="var(--color-success-default)" />
),
},
},
rightIcon: {
@ -86,10 +93,10 @@ DefaultStory.storyName = 'Default';
DefaultStory.args = {
label: 'Chip',
borderColor: COLORS.UI3,
backgroundColor: COLORS.UI1,
borderColor: COLORS.BORDER_DEFAULT,
backgroundColor: COLORS.BACKGROUND_ALTERNATIVE,
labelProps: {
color: COLORS.BLACK,
color: COLORS.TEXT_DEFAULT,
variant: TYPOGRAPHY.H6,
},
};
@ -97,15 +104,15 @@ DefaultStory.args = {
export const WithLeftIcon = () => (
<Chip
label="Done!"
borderColor={COLORS.SUCCESS3}
leftIcon={<ApproveIcon size={24} color="#4cd964" />}
borderColor={COLORS.SUCCESS_DEFAULT}
leftIcon={<ApproveIcon size={24} color="var(--color-success-default)" />}
/>
);
export const WithRightIcon = () => (
<Chip
label="0x5CfE73b6021E818B776b421B1c4Db2474086a7e1"
borderColor={COLORS.UI4}
borderColor={COLORS.BORDER_DEFAULT}
rightIcon={
<Identicon
address="0x5CfE73b6021E818B776b421B1c4Db2474086a7e1"
@ -118,21 +125,8 @@ export const WithRightIcon = () => (
export const WithBothIcons = () => (
<Chip
label="Account 1"
borderColor={COLORS.UI4}
rightIcon={
<svg
width="10"
height="6"
viewBox="0 0 10 6"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M9.45759 0.857142C9.45759 0.785714 9.42188 0.705357 9.3683 0.651785L8.92188 0.205357C8.8683 0.151785 8.78795 0.116071 8.71652 0.116071C8.64509 0.116071 8.56473 0.151785 8.51116 0.205357L5.00223 3.71429L1.4933 0.205357C1.43973 0.151785 1.35938 0.116071 1.28795 0.116071C1.20759 0.116071 1.13616 0.151785 1.08259 0.205357L0.636161 0.651785C0.582589 0.705357 0.546875 0.785714 0.546875 0.857142C0.546875 0.928571 0.582589 1.00893 0.636161 1.0625L4.79688 5.22321C4.85045 5.27679 4.9308 5.3125 5.00223 5.3125C5.07366 5.3125 5.15402 5.27679 5.20759 5.22321L9.3683 1.0625C9.42188 1.00893 9.45759 0.928571 9.45759 0.857142Z"
fill="#24292E"
/>
</svg>
}
borderColor={COLORS.BORDER_DEFAULT}
rightIcon={<InfoIcon size={24} severity={SEVERITIES.INFO} />}
leftIcon={
<Identicon
address="0x5CfE73b6021E818B776b421B1c4Db2474086a7e1"
@ -153,5 +147,5 @@ export const WithInput = (args) => {
};
WithInput.args = {
borderColor: COLORS.UI3,
borderColor: COLORS.BORDER_DEFAULT,
};

8
ui/components/ui/icon/index.scss
View File

@ -2,18 +2,18 @@
margin: 0 4px;
&--success {
fill: var(--success-1);
fill: var(--color-success-default);
}
&--info {
fill: var(--primary-1);
fill: var(--color-primary-default);
}
&--warning {
fill: var(--alert-3);
fill: var(--color-warning-default);
}
&--danger {
fill: var(--error-1);
fill: var(--color-error-default);
}
}

2
ui/components/ui/textarea/index.scss
View File

@ -3,7 +3,7 @@
.textarea {
display: block;
box-shadow: none;
color: var(--black);
color: var(--color-text-default);
@include design-system.H6;

3
ui/components/ui/textarea/textarea.js
View File

@ -34,7 +34,8 @@ const TextArea = ({
);
return (
<Box
borderColor={COLORS.UI3}
backgroundColor={COLORS.BACKGROUND_DEFAULT}
borderColor={COLORS.BORDER_DEFAULT}
borderRadius={SIZES.SM}
borderStyle={BORDER_STYLE.SOLID}
padding={[4, 4]}

2
ui/components/ui/truncated-definition-list/truncated-definition-list.js
View File

@ -24,7 +24,7 @@ export default function TruncatedDefinitionList({
padding={4}
paddingBottom={3}
borderRadius={SIZES.LG}
borderColor={COLORS.UI2}
borderColor={COLORS.BORDER_MUTED}
>
<DefinitionList
dictionary={pick(dictionary, prefaceKeys)}

2
ui/components/ui/typography/typography.js
View File

@ -16,7 +16,7 @@ const { H6, H7, H8, H9 } = TYPOGRAPHY;
export default function Typography({
variant = TYPOGRAPHY.Paragraph,
className,
color = COLORS.BLACK,
color = COLORS.TEXT_DEFAULT,
tag,
children,
fontWeight = 'normal',

2
ui/pages/first-time-flow/seed-phrase/seed-phrase-intro/seed-phrase-intro.component.js
View File

@ -87,7 +87,7 @@ export default function SeedPhraseIntro() {
padding={4}
borderWidth={1}
borderRadius={SIZES.MD}
borderColor={COLORS.UI2}
borderColor={COLORS.BORDER_MUTED}
borderStyle={BORDER_STYLE.SOLID}
>
<Box marginBottom={4}>

6
ui/pages/onboarding-flow/recovery-phrase/recovery-phrase-chips.js
View File

@ -26,7 +26,7 @@ export default function RecoveryPhraseChips({
const hideSeedPhrase = phraseRevealed === false;
return (
<Box
borderColor={COLORS.UI2}
borderColor={COLORS.BORDER_MUTED}
borderStyle={BORDER_STYLE.SOLID}
padding={4}
borderWidth={1}
@ -54,7 +54,7 @@ export default function RecoveryPhraseChips({
</div>
<ChipWithInput
dataTestId={`recovery-phrase-input-${index}`}
borderColor={COLORS.PRIMARY1}
borderColor={COLORS.PRIMARY_DEFAULT}
className="recovery-phrase__chip--with-input"
inputValue={inputValue[index]}
setInputValue={(value) => {
@ -72,7 +72,7 @@ export default function RecoveryPhraseChips({
<Chip
dataTestId={`recovery-phrase-chip-${index}`}
className="recovery-phrase__chip"
borderColor={COLORS.UI3}
borderColor={COLORS.BORDER_DEFAULT}
>
{word}
</Chip>