Skip to content

replace hex values to design tokens #22629

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 9 commits into from
Jan 29, 2024
Merged

replace hex values to design tokens #22629

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
ddb852d
replace hex values to design tokens
garrettbear Jan 22, 2024
2c56642
fix confirm add suggested nft text color
garrettbear Jan 22, 2024
e8b08a3
confirm add suggested token
garrettbear Jan 22, 2024
1d1d0ff
update custody account list
garrettbear Jan 22, 2024
76cee7e
update custody account list
garrettbear Jan 23, 2024
757d6ba
Merge branch 'develop' into feat/22364/update-hex-values-design-token…
garrettbear Jan 24, 2024
2d81da2
arrow icon
garrettbear Jan 24, 2024
09a9266
update reverted and success icon
garrettbear Jan 24, 2024
96d6bc5
update snapshots
garrettbear Jan 24, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions ui/helpers/utils/settings-search.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,12 +51,12 @@ function colorText(menuElement, regex) {
let elemText = menuElement.innerHTML;
elemText = elemText.replace('&', '&');
elemText = elemText.replace(
/(<span style="background:#ffd33d">|<\/span>)/gim,
/(<span style="background:var(--brand-colors-yellow-yellow500)">|<\/span>)/gim,
'',
);
menuElement.innerHTML = elemText.replace(
regex,
'<span style="background:#ffd33d">$&</span>',
'<span style="background:var(--brand-colors-yellow-yellow500)">$&</span>',
Comment on lines +54 to +59
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Before & After

Screen.Recording.2024-01-22.at.1.53.13.PM.mov

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would suggest getting @Akatori-Design to make a theme suggestion here so the experience is improved in darkmode possibly info/muted?

);
}
}
Expand Down
4 changes: 2 additions & 2 deletions ui/pages/confirm-add-suggested-nft/__snapshots__/confirm-add-suggested-nft.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -185,7 +185,7 @@ exports[`ConfirmAddSuggestedNFT Component should match snapshot 1`] = `
CryptoKitty
</p>
<p
class="mm-box mm-text confirm-add-suggested-nft__nft-tokenId mm-text--body-md mm-box--color-text-default"
class="mm-box mm-text confirm-add-suggested-nft__nft-tokenId mm-text--body-md mm-box--color-text-alternative"
>
#
15
Expand Down Expand Up @@ -395,7 +395,7 @@ exports[`ConfirmAddSuggestedNFT Component should match snapshot 1`] = `
CryptoKitty
</p>
<p
class="mm-box mm-text confirm-add-suggested-nft__nft-tokenId mm-text--body-md mm-box--color-text-default"
class="mm-box mm-text confirm-add-suggested-nft__nft-tokenId mm-text--body-md mm-box--color-text-alternative"
>
#
15
Expand Down
3 changes: 3 additions & 0 deletions ui/pages/confirm-add-suggested-nft/confirm-add-suggested-nft.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,7 @@ import {
TextAlign,
TextVariant,
BlockSize,
TextColor,
} from '../../helpers/constants/design-system';
import NetworkAccountBalanceHeader from '../../components/app/network-account-balance-header/network-account-balance-header';
import { NETWORK_TO_NAME_MAP } from '../../../shared/constants/network';
Expand Down Expand Up @@ -294,6 +295,7 @@ const ConfirmAddSuggestedNFT = () => {
)}
<Text
variant={TextVariant.bodyMd}
color={TextColor.textAlternative}
className="confirm-add-suggested-nft__nft-tokenId"
>
#{tokenId}
Expand Down Expand Up @@ -359,6 +361,7 @@ const ConfirmAddSuggestedNFT = () => {
)}
<Text
variant={TextVariant.bodySm}
color={TextColor.textAlternative}
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Text color wasn't properly changing from the stylesheet, so removed the hex and added the TextColor here

Before & After

Screen.Recording.2024-01-22.at.2.36.19.PM.mov

className="confirm-add-suggested-nft__nft-tokenId"
>
#{tokenId}
Expand Down
2 changes: 0 additions & 2 deletions ui/pages/confirm-add-suggested-nft/index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,8 +56,6 @@

&__nft-tokenid {
@include H7;

color: #606060;
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Color wasn't actually being applied properly, so it was removed and the actual TextColor was set at the Text component. See comment above

}

&__nft-remove-tooltip {
Expand Down
6 changes: 3 additions & 3 deletions ui/pages/institutional/connect-custody/index.scss
View file
Open in desktop
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Before & After

Screen.Recording.2024-01-22.at.3.48.38.PM.mov

Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
overflow: auto;

&__item {
border-bottom: 1px solid #d2d8dd;
border-bottom: 1px solid var(--color-border-muted);
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Before & After

Screen.Recording.2024-01-22.at.3.48.38.PM.mov


input {
margin: 12px 0 0 4px;
Expand All @@ -27,7 +27,7 @@
}

&__item:first-child {
border-top: 1px solid #d2d8dd;
border-top: 1px solid var(--color-border-muted);
}

&__item:last-child {
Expand All @@ -39,7 +39,7 @@
}

&__buttons {
border-top: 1px solid #d2d8dd;
border-top: 1px solid var(--color-border-muted);
}

&__button:not(:last-child) {
Expand Down
2 changes: 1 addition & 1 deletion ui/pages/swaps/smart-transaction-status/__snapshots__/arrow-icon.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ exports[`ArrowIcon renders the ArrowIcon component 1`] = `
>
<path
d="M14.4946 6.14779C14.4863 5.93594 14.3991 5.69108 14.2539 5.53666L9.51334 0.49958C9.1921 0.21091 8.57613 0.0917437 8.21709 0.425509C7.86344 0.754237 7.87396 1.39178 8.22627 1.72181L11.5595 5.25889L1.1618 5.25889C0.670919 5.25889 0.272949 5.65687 0.272949 6.14779C0.272949 6.6387 0.670919 7.03668 1.1618 7.03668L11.5595 7.03668L8.22627 10.5738C7.92297 10.8776 7.86691 11.5376 8.21709 11.8701C8.56718 12.2025 9.20529 12.0963 9.51334 11.796L14.2539 6.75891C14.4161 6.58653 14.4952 6.38428 14.4946 6.14779Z"
fill="#D6D9DC"
fill="var(--color-text-muted)"
/>
</svg>
</div>
Expand Down
4 changes: 2 additions & 2 deletions ui/pages/swaps/smart-transaction-status/__snapshots__/reverted-icon.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,11 +11,11 @@ exports[`RevertedIcon renders the RevertedIcon component 1`] = `
>
<path
d="M34.6806 6.55143C36.2395 8.11033 37.4995 9.91222 38.4238 11.8681C38.8067 12.6782 39.1319 13.5148 39.3969 14.3714L39.4243 14.4606C39.5817 14.9785 39.7172 15.5037 39.8301 16.0347C40.7512 20.3654 40.1336 24.9029 38.0512 28.8509C35.7002 33.308 31.675 36.6487 26.861 38.138C24.4773 38.8754 21.9718 39.1361 19.4874 38.9052C17.003 38.6743 14.5884 37.9563 12.3814 36.7922C10.3609 35.7264 8.62055 34.3588 7.18343 32.7636C5.71254 31.1448 4.53064 29.2824 3.69188 27.2574C3.42339 26.6092 2.99695 25.2767 2.99695 25.2767H6.99592C7.78677 27.4068 9.06042 29.362 10.7289 30.9609L10.7319 30.96C11.6097 31.8005 12.6011 32.5516 13.6951 33.1786C15.9743 34.483 18.5737 35.1864 21.2456 35.1864C25.2769 35.1864 29.143 33.585 31.9936 30.7345C34.8441 27.8839 36.4456 24.0177 36.4456 19.9865C36.4456 18.7267 36.2892 17.483 35.9872 16.2814C35.9207 16.017 35.8471 15.7546 35.7667 15.4945C34.5753 11.6432 31.9028 8.42306 28.3371 6.54231C24.7714 4.66156 20.6046 4.27429 16.7534 5.46571C12.9838 6.63189 9.81878 9.21706 7.92263 12.6699L12.9962 15.307L3.3834 18.3447L0.345703 8.73191L4.55015 10.9171C6.91547 6.56278 10.8906 3.30177 15.6304 1.83546C17.4659 1.26761 19.3588 0.986653 21.2456 0.986694C26.2847 0.986694 31.1174 2.98824 34.6806 6.55143Z"
fill="#D73A49"
fill="var(--color-error-default)"
/>
<path
d="M18.5849 19.9869L15.1454 23.4264L17.9845 26.2655L21.424 22.826L24.8635 26.2655L27.7026 23.4264L24.2631 19.9869L27.7026 16.5473L24.8635 13.7082L21.424 17.1478L17.9845 13.7082L15.1454 16.5473L18.5849 19.9869Z"
fill="#D73A49"
fill="var(--color-error-default)"
/>
</svg>
</div>
Expand Down
2 changes: 1 addition & 1 deletion ui/pages/swaps/smart-transaction-status/__snapshots__/success-icon.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ exports[`SuccessIcon renders the SuccessIcon component 1`] = `
>
<path
d="M34.5457 19.8983C34.5457 23.9296 32.9443 27.7958 30.0937 30.6463C27.2432 33.4969 23.377 35.0983 19.3457 35.0983C15.3144 35.0983 11.4482 33.4969 8.59768 30.6463C5.74713 27.7958 4.1457 23.9296 4.1457 19.8983C4.1457 15.867 5.74713 12.0008 8.59768 9.15029C11.4482 6.29974 15.3144 4.69832 19.3457 4.69832C20.7897 4.69832 22.1957 4.90732 23.5257 5.28732L26.5087 2.30432C24.3047 1.39232 21.8917 0.898315 19.3457 0.898315C16.8506 0.898315 14.3799 1.38977 12.0747 2.3446C9.76953 3.29944 7.67499 4.69897 5.91067 6.46329C2.34748 10.0265 0.345703 14.8592 0.345703 19.8983C0.345703 24.9374 2.34748 29.7702 5.91067 33.3333C7.67499 35.0977 9.76953 36.4972 12.0747 37.452C14.3799 38.4069 16.8506 38.8983 19.3457 38.8983C24.3848 38.8983 29.2175 36.8965 32.7807 33.3333C36.3439 29.7702 38.3457 24.9374 38.3457 19.8983H34.5457ZM11.5747 16.2503L8.8957 18.9483L17.4457 27.4983L36.4457 8.49832L33.7667 5.80032L17.4457 22.1213L11.5747 16.2503Z"
fill="#28A745"
fill="var(--color-success-default)"
/>
</svg>
</div>
Expand Down
2 changes: 1 addition & 1 deletion ui/pages/swaps/smart-transaction-status/arrow-icon.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ export default function ArrowIcon() {
>
<path
d="M14.4946 6.14779C14.4863 5.93594 14.3991 5.69108 14.2539 5.53666L9.51334 0.49958C9.1921 0.21091 8.57613 0.0917437 8.21709 0.425509C7.86344 0.754237 7.87396 1.39178 8.22627 1.72181L11.5595 5.25889L1.1618 5.25889C0.670919 5.25889 0.272949 5.65687 0.272949 6.14779C0.272949 6.6387 0.670919 7.03668 1.1618 7.03668L11.5595 7.03668L8.22627 10.5738C7.92297 10.8776 7.86691 11.5376 8.21709 11.8701C8.56718 12.2025 9.20529 12.0963 9.51334 11.796L14.2539 6.75891C14.4161 6.58653 14.4952 6.38428 14.4946 6.14779Z"
fill="#D6D9DC"
fill="var(--color-text-muted)"
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Subtle change

Before & After

Screen.Recording.2024-01-24.at.9.46.56.AM.mov

/>
</svg>
);
Expand Down
4 changes: 2 additions & 2 deletions ui/pages/swaps/smart-transaction-status/reverted-icon.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,11 +11,11 @@ export default function RevertedIcon() {
>
<path
d="M34.6806 6.55143C36.2395 8.11033 37.4995 9.91222 38.4238 11.8681C38.8067 12.6782 39.1319 13.5148 39.3969 14.3714L39.4243 14.4606C39.5817 14.9785 39.7172 15.5037 39.8301 16.0347C40.7512 20.3654 40.1336 24.9029 38.0512 28.8509C35.7002 33.308 31.675 36.6487 26.861 38.138C24.4773 38.8754 21.9718 39.1361 19.4874 38.9052C17.003 38.6743 14.5884 37.9563 12.3814 36.7922C10.3609 35.7264 8.62055 34.3588 7.18343 32.7636C5.71254 31.1448 4.53064 29.2824 3.69188 27.2574C3.42339 26.6092 2.99695 25.2767 2.99695 25.2767H6.99592C7.78677 27.4068 9.06042 29.362 10.7289 30.9609L10.7319 30.96C11.6097 31.8005 12.6011 32.5516 13.6951 33.1786C15.9743 34.483 18.5737 35.1864 21.2456 35.1864C25.2769 35.1864 29.143 33.585 31.9936 30.7345C34.8441 27.8839 36.4456 24.0177 36.4456 19.9865C36.4456 18.7267 36.2892 17.483 35.9872 16.2814C35.9207 16.017 35.8471 15.7546 35.7667 15.4945C34.5753 11.6432 31.9028 8.42306 28.3371 6.54231C24.7714 4.66156 20.6046 4.27429 16.7534 5.46571C12.9838 6.63189 9.81878 9.21706 7.92263 12.6699L12.9962 15.307L3.3834 18.3447L0.345703 8.73191L4.55015 10.9171C6.91547 6.56278 10.8906 3.30177 15.6304 1.83546C17.4659 1.26761 19.3588 0.986653 21.2456 0.986694C26.2847 0.986694 31.1174 2.98824 34.6806 6.55143Z"
fill="#D73A49"
fill="var(--color-error-default)"
/>
<path
d="M18.5849 19.9869L15.1454 23.4264L17.9845 26.2655L21.424 22.826L24.8635 26.2655L27.7026 23.4264L24.2631 19.9869L27.7026 16.5473L24.8635 13.7082L21.424 17.1478L17.9845 13.7082L15.1454 16.5473L18.5849 19.9869Z"
fill="#D73A49"
fill="var(--color-error-default)"
Comment on lines +14 to +18
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Before

Screenshot 2024-01-24 at 10 03 51 AM Screenshot 2024-01-24 at 10 11 33 AM

After

Screenshot 2024-01-24 at 10 05 14 AM Screenshot 2024-01-24 at 10 11 49 AM

/>
</svg>
);
Expand Down
2 changes: 1 addition & 1 deletion ui/pages/swaps/smart-transaction-status/success-icon.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ export default function SuccessIcon() {
>
<path
d="M34.5457 19.8983C34.5457 23.9296 32.9443 27.7958 30.0937 30.6463C27.2432 33.4969 23.377 35.0983 19.3457 35.0983C15.3144 35.0983 11.4482 33.4969 8.59768 30.6463C5.74713 27.7958 4.1457 23.9296 4.1457 19.8983C4.1457 15.867 5.74713 12.0008 8.59768 9.15029C11.4482 6.29974 15.3144 4.69832 19.3457 4.69832C20.7897 4.69832 22.1957 4.90732 23.5257 5.28732L26.5087 2.30432C24.3047 1.39232 21.8917 0.898315 19.3457 0.898315C16.8506 0.898315 14.3799 1.38977 12.0747 2.3446C9.76953 3.29944 7.67499 4.69897 5.91067 6.46329C2.34748 10.0265 0.345703 14.8592 0.345703 19.8983C0.345703 24.9374 2.34748 29.7702 5.91067 33.3333C7.67499 35.0977 9.76953 36.4972 12.0747 37.452C14.3799 38.4069 16.8506 38.8983 19.3457 38.8983C24.3848 38.8983 29.2175 36.8965 32.7807 33.3333C36.3439 29.7702 38.3457 24.9374 38.3457 19.8983H34.5457ZM11.5747 16.2503L8.8957 18.9483L17.4457 27.4983L36.4457 8.49832L33.7667 5.80032L17.4457 22.1213L11.5747 16.2503Z"
fill="#28A745"
fill="var(--color-success-default)"
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Before

Screenshot 2024-01-24 at 10 06 48 AM Screenshot 2024-01-24 at 10 07 41 AM

After

Screenshot 2024-01-24 at 10 07 35 AM Screenshot 2024-01-24 at 10 10 57 AM

/>
</svg>
);
Expand Down