m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-11-26 12:29:06 +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 = { const STATUS_COLORS = {
[STATUSES.INSTALLING]: COLORS.ALERT1, [STATUSES.INSTALLING]: COLORS.WARNING_DEFAULT,
[STATUSES.RUNNING]: COLORS.SUCCESS1, [STATUSES.RUNNING]: COLORS.SUCCESS_DEFAULT,
[STATUSES.STOPPED]: COLORS.UI4, [STATUSES.STOPPED]: COLORS.ICON_MUTED,
[STATUSES.CRASHED]: COLORS.ERROR1, [STATUSES.CRASHED]: COLORS.ERROR_DEFAULT,
}; };
const SnapSettingsCard = ({ const SnapSettingsCard = ({
@ -81,7 +81,7 @@ const SnapSettingsCard = ({
marginTop: 0, marginTop: 0,
marginBottom: 0, marginBottom: 0,
}} }}
color={COLORS.BLACK} color={COLORS.TEXT_DEFAULT}
variant={TYPOGRAPHY.H4} variant={TYPOGRAPHY.H4}
fontWeight={FONT_WEIGHT.BOLD} fontWeight={FONT_WEIGHT.BOLD}
className="snap-settings-card__title" className="snap-settings-card__title"
@ -101,7 +101,7 @@ const SnapSettingsCard = ({
</Box> </Box>
<Typography <Typography
variant={TYPOGRAPHY.Paragraph} variant={TYPOGRAPHY.Paragraph}
color={COLORS.UI4} color={COLORS.TEXT_ALTERNATIVE}
fontWeight={FONT_WEIGHT.NORMAL} fontWeight={FONT_WEIGHT.NORMAL}
className="snap-settings-card__body" className="snap-settings-card__body"
boxProps={{ boxProps={{
@ -141,10 +141,10 @@ const SnapSettingsCard = ({
} }
label={status} label={status}
labelProps={{ labelProps={{
color: COLORS.UI4, color: COLORS.TEXT_ALTERNATIVE,
margin: [0, 1], margin: [0, 1],
}} }}
backgroundColor={COLORS.UI1} backgroundColor={COLORS.BACKGROUND_ALTERNATIVE}
className="snap-settings-card__chip" className="snap-settings-card__chip"
{...chipProps} {...chipProps}
/> />
@ -158,7 +158,7 @@ const SnapSettingsCard = ({
boxProps={{ boxProps={{
margin: [0, 0], margin: [0, 0],
}} }}
color={COLORS.UI3} color={COLORS.TEXT_MUTED}
variant={TYPOGRAPHY.H8} variant={TYPOGRAPHY.H8}
fontWeight={FONT_WEIGHT.NORMAL} fontWeight={FONT_WEIGHT.NORMAL}
tag="span" tag="span"
@ -173,7 +173,7 @@ const SnapSettingsCard = ({
paddingLeft: 2, paddingLeft: 2,
margin: [0, 0], margin: [0, 0],
}} }}
color={COLORS.UI4} color={COLORS.TEXT_MUTED}
variant={TYPOGRAPHY.H7} variant={TYPOGRAPHY.H7}
fontWeight={FONT_WEIGHT.NORMAL} fontWeight={FONT_WEIGHT.NORMAL}
align={TEXT_ALIGN.CENTER} align={TEXT_ALIGN.CENTER}

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

@ -6,11 +6,11 @@
&:hover, &:hover,
&:focus { &:focus {
.chip { .chip {
background-color: var(--ui-1); background-color: var(--color-background-alternative);
} }
} }
} }
.snaps-authorship-icon { .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" /> <i className="fab fa-npm fa-lg snaps-authorship-icon" />
</Box> </Box>
} }
backgroundColor={COLORS.WHITE} backgroundColor={COLORS.BACKGROUND_DEFAULT}
> >
<Typography <Typography
className="chip__label" className="chip__label"
variant={TYPOGRAPHY.H7} variant={TYPOGRAPHY.H7}
tag="span" tag="span"
color={COLORS.UI4} color={COLORS.TEXT_ALTERNATIVE}
> >
{packageName} {packageName}
</Typography> </Typography>

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

@ -30,6 +30,80 @@ const ValidSize = PropTypes.oneOf([
12, 12,
'auto', '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); const ArrayOfValidSizes = PropTypes.arrayOf(ValidSize);
export const MultipleSizes = PropTypes.oneOfType([ export const MultipleSizes = PropTypes.oneOfType([
ValidSize, ValidSize,
@ -180,7 +254,7 @@ Box.propTypes = {
paddingBottom: ValidSize, paddingBottom: ValidSize,
paddingRight: ValidSize, paddingRight: ValidSize,
paddingLeft: ValidSize, paddingLeft: ValidSize,
borderColor: PropTypes.oneOf(Object.values(COLORS)), borderColor: PropTypes.oneOf(Object.values(ValidBorderColors)),
borderWidth: PropTypes.number, borderWidth: PropTypes.number,
borderRadius: PropTypes.oneOf(Object.values(SIZES)), borderRadius: PropTypes.oneOf(Object.values(SIZES)),
borderStyle: PropTypes.oneOf(Object.values(BORDER_STYLE)), borderStyle: PropTypes.oneOf(Object.values(BORDER_STYLE)),
@ -190,6 +264,6 @@ Box.propTypes = {
display: PropTypes.oneOf(Object.values(DISPLAY)), display: PropTypes.oneOf(Object.values(DISPLAY)),
width: PropTypes.oneOf(Object.values(BLOCK_SIZES)), width: PropTypes.oneOf(Object.values(BLOCK_SIZES)),
height: 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, className: PropTypes.string,
}; };

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

@ -10,9 +10,11 @@ import {
} from '../../../helpers/constants/design-system'; } from '../../../helpers/constants/design-system';
import Typography from '../typography'; import Typography from '../typography';
import Box from './box'; import Box from './box';
import README from './README.mdx'; 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 sizeKnobOptions = [undefined, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
const marginSizeKnobOptions = [...sizeKnobOptions, 'auto']; const marginSizeKnobOptions = [...sizeKnobOptions, 'auto'];
@ -56,14 +58,14 @@ export default {
table: { category: 'display' }, table: { category: 'display' },
}, },
backgroundColor: { backgroundColor: {
options: Object.values(COLORS), options: ValidBackgroundColors,
control: 'select', control: 'select',
table: { table: {
category: 'background', category: 'background',
}, },
}, },
borderColor: { borderColor: {
options: Object.values(COLORS), options: ValidBorderColors,
control: 'select', control: 'select',
defaultValue: COLORS.BORDER_DEFAULT, defaultValue: COLORS.BORDER_DEFAULT,
table: { category: 'border' }, 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 PropTypes from 'prop-types';
import classnames from 'classnames'; import classnames from 'classnames';
import InfoIconInverted from '../icon/info-icon-inverted.component'; 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 { MILLISECOND } from '../../../../shared/constants/time';
import Typography from '../typography';
export default function Callout({ export default function Callout({
severity, severity,
@ -36,7 +37,9 @@ export default function Callout({
return ( return (
<div className={calloutClassName}> <div className={calloutClassName}>
<InfoIconInverted severity={severity} /> <InfoIconInverted severity={severity} />
<div className="callout__content">{children}</div> <Typography color={COLORS.TEXT_DEFAULT} className="callout__content">
{children}
</Typography>
{dismiss && ( {dismiss && (
<i <i
onClick={() => { onClick={() => {

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

@ -10,12 +10,12 @@
transition: opacity 0.75s 0s; transition: opacity 0.75s 0s;
a { a {
color: var(--primary-1); color: var(--color-primary-default);
} }
&--dismissible { &--dismissible {
&#{$self}--first { &#{$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 { &--warning {
border-left: 2px solid var(--alert-1); border-left: 2px solid var(--color-warning-default);
} }
&--danger { &--danger {
border-left: 2px solid var(--error-1); border-left: 2px solid var(--color-error-default);
} }
&--info { &--info {
border-left: 2px solid var(--primary-1); border-left: 2px solid var(--color-info-default);
} }
&--success { &--success {
border-left: 2px solid var(--success-1); border-left: 2px solid var(--color-success-default);
} }
& .info-icon { & .info-icon {

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

@ -22,7 +22,7 @@ export default {
}; };
export const PersistentCallout = (args) => ( 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}> <Box margin={2}>
<Typography variant={TYPOGRAPHY.H4}>This is your private key:</Typography> <Typography variant={TYPOGRAPHY.H4}>This is your private key:</Typography>
<Typography variant={TYPOGRAPHY.H6}> <Typography variant={TYPOGRAPHY.H6}>
@ -36,7 +36,7 @@ export const PersistentCallout = (args) => (
export const DismissibleCallout = (args) => { export const DismissibleCallout = (args) => {
const [dismissed, setDismissed] = useState(false); const [dismissed, setDismissed] = useState(false);
return ( return (
<Box borderColor={COLORS.UI2} padding={[8, 0, 0, 0]}> <Box borderColor={COLORS.BORDER_DEFAULT} padding={[8, 0, 0, 0]}>
<Box margin={2}> <Box margin={2}>
<Typography variant={TYPOGRAPHY.H4}> <Typography variant={TYPOGRAPHY.H4}>
This is your private key: This is your private key:
@ -81,7 +81,7 @@ export const MultipleDismissibleCallouts = () => {
}; };
return ( return (
<Box borderColor={COLORS.UI2} padding={[8, 0, 0, 0]}> <Box borderColor={COLORS.BORDER_DEFAULT} padding={[8, 0, 0, 0]}>
<Box margin={2}> <Box margin={2}>
<Typography variant={TYPOGRAPHY.H4}> <Typography variant={TYPOGRAPHY.H4}>
This is your private key: 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 // All padding related props of the Box component will work
// To change the background color // 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 = ({ const Card = ({
border = true, border = true,
padding = 4, padding = 4,
backgroundColor = COLORS.WHITE, backgroundColor = COLORS.BACKGROUND_DEFAULT,
children, children,
...props ...props
}) => { }) => {
const defaultBorderProps = { const defaultBorderProps = {
borderColor: border && COLORS.UI2, borderColor: border && COLORS.BORDER_MUTED,
borderRadius: border && SIZES.MD, borderRadius: border && SIZES.MD,
borderStyle: border && BORDER_STYLE.SOLID, 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({ export function ChipWithInput({
dataTestId, dataTestId,
className, className,
borderColor = COLORS.UI1, borderColor = COLORS.BORDER_DEFAULT,
inputValue, inputValue,
setInputValue, setInputValue,
}) { }) {

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

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

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

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

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

@ -1,8 +1,13 @@
import React, { useState } from 'react'; 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 ApproveIcon from '../icon/approve-icon.component';
import InfoIcon from '../icon/info-icon.component';
import Identicon from '../identicon/identicon.component'; import Identicon from '../identicon/identicon.component';
import { ChipWithInput } from './chip-with-input'; import { ChipWithInput } from './chip-with-input';
@ -26,7 +31,9 @@ export default {
}, },
options: ['ApproveIcon'], options: ['ApproveIcon'],
mapping: { mapping: {
ApproveIcon: <ApproveIcon size={24} color="#4cd964" />, ApproveIcon: (
<ApproveIcon size={24} color="var(--color-success-default)" />
),
}, },
}, },
rightIcon: { rightIcon: {
@ -86,10 +93,10 @@ DefaultStory.storyName = 'Default';
DefaultStory.args = { DefaultStory.args = {
label: 'Chip', label: 'Chip',
borderColor: COLORS.UI3, borderColor: COLORS.BORDER_DEFAULT,
backgroundColor: COLORS.UI1, backgroundColor: COLORS.BACKGROUND_ALTERNATIVE,
labelProps: { labelProps: {
color: COLORS.BLACK, color: COLORS.TEXT_DEFAULT,
variant: TYPOGRAPHY.H6, variant: TYPOGRAPHY.H6,
}, },
}; };
@ -97,15 +104,15 @@ DefaultStory.args = {
export const WithLeftIcon = () => ( export const WithLeftIcon = () => (
<Chip <Chip
label="Done!" label="Done!"
borderColor={COLORS.SUCCESS3} borderColor={COLORS.SUCCESS_DEFAULT}
leftIcon={<ApproveIcon size={24} color="#4cd964" />} leftIcon={<ApproveIcon size={24} color="var(--color-success-default)" />}
/> />
); );
export const WithRightIcon = () => ( export const WithRightIcon = () => (
<Chip <Chip
label="0x5CfE73b6021E818B776b421B1c4Db2474086a7e1" label="0x5CfE73b6021E818B776b421B1c4Db2474086a7e1"
borderColor={COLORS.UI4} borderColor={COLORS.BORDER_DEFAULT}
rightIcon={ rightIcon={
<Identicon <Identicon
address="0x5CfE73b6021E818B776b421B1c4Db2474086a7e1" address="0x5CfE73b6021E818B776b421B1c4Db2474086a7e1"
@ -118,21 +125,8 @@ export const WithRightIcon = () => (
export const WithBothIcons = () => ( export const WithBothIcons = () => (
<Chip <Chip
label="Account 1" label="Account 1"
borderColor={COLORS.UI4} borderColor={COLORS.BORDER_DEFAULT}
rightIcon={ rightIcon={<InfoIcon size={24} severity={SEVERITIES.INFO} />}
<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>
}
leftIcon={ leftIcon={
<Identicon <Identicon
address="0x5CfE73b6021E818B776b421B1c4Db2474086a7e1" address="0x5CfE73b6021E818B776b421B1c4Db2474086a7e1"
@ -153,5 +147,5 @@ export const WithInput = (args) => {
}; };
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; margin: 0 4px;
&--success { &--success {
fill: var(--success-1); fill: var(--color-success-default);
} }
&--info { &--info {
fill: var(--primary-1); fill: var(--color-primary-default);
} }
&--warning { &--warning {
fill: var(--alert-3); fill: var(--color-warning-default);
} }
&--danger { &--danger {
fill: var(--error-1); fill: var(--color-error-default);
} }
} }

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

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

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

@ -34,7 +34,8 @@ const TextArea = ({
); );
return ( return (
<Box <Box
borderColor={COLORS.UI3} backgroundColor={COLORS.BACKGROUND_DEFAULT}
borderColor={COLORS.BORDER_DEFAULT}
borderRadius={SIZES.SM} borderRadius={SIZES.SM}
borderStyle={BORDER_STYLE.SOLID} borderStyle={BORDER_STYLE.SOLID}
padding={[4, 4]} 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} padding={4}
paddingBottom={3} paddingBottom={3}
borderRadius={SIZES.LG} borderRadius={SIZES.LG}
borderColor={COLORS.UI2} borderColor={COLORS.BORDER_MUTED}
> >
<DefinitionList <DefinitionList
dictionary={pick(dictionary, prefaceKeys)} 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({ export default function Typography({
variant = TYPOGRAPHY.Paragraph, variant = TYPOGRAPHY.Paragraph,
className, className,
color = COLORS.BLACK, color = COLORS.TEXT_DEFAULT,
tag, tag,
children, children,
fontWeight = 'normal', 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} padding={4}
borderWidth={1} borderWidth={1}
borderRadius={SIZES.MD} borderRadius={SIZES.MD}
borderColor={COLORS.UI2} borderColor={COLORS.BORDER_MUTED}
borderStyle={BORDER_STYLE.SOLID} borderStyle={BORDER_STYLE.SOLID}
> >
<Box marginBottom={4}> <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; const hideSeedPhrase = phraseRevealed === false;
return ( return (
<Box <Box
borderColor={COLORS.UI2} borderColor={COLORS.BORDER_MUTED}
borderStyle={BORDER_STYLE.SOLID} borderStyle={BORDER_STYLE.SOLID}
padding={4} padding={4}
borderWidth={1} borderWidth={1}
@ -54,7 +54,7 @@ export default function RecoveryPhraseChips({
</div> </div>
<ChipWithInput <ChipWithInput
dataTestId={`recovery-phrase-input-${index}`} dataTestId={`recovery-phrase-input-${index}`}
borderColor={COLORS.PRIMARY1} borderColor={COLORS.PRIMARY_DEFAULT}
className="recovery-phrase__chip--with-input" className="recovery-phrase__chip--with-input"
inputValue={inputValue[index]} inputValue={inputValue[index]}
setInputValue={(value) => { setInputValue={(value) => {
@ -72,7 +72,7 @@ export default function RecoveryPhraseChips({
<Chip <Chip
dataTestId={`recovery-phrase-chip-${index}`} dataTestId={`recovery-phrase-chip-${index}`}
className="recovery-phrase__chip" className="recovery-phrase__chip"
borderColor={COLORS.UI3} borderColor={COLORS.BORDER_DEFAULT}
> >
{word} {word}
</Chip> </Chip>