replace hex values to design tokens #22629

garrettbear · 2024-01-22T21:54:49Z

Description

Part 2 Replace static hex values to a token from design-tokens that best matches. If unavailable, a temporary file has been set up for any new tokens needed but not yet provided by the design-tokens package.

The last of the hex codes in repo appear best to be left as is

In VS code you can search regex: #(?:[0-9a-fA-F]{3}){1,2} files to include ui/**/*.{scss,jsx,tsx,js,ts,css}

Related issues

Fixes: #22364

Manual testing steps

Run locally
Compare local storybook to production storybook on the components color change
Be sure to test light and dark mode

Screenshots/Recordings

See code comments

Before

See code files

After

Pre-merge author checklist

Pre-merge reviewer checklist

I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed).
I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots.

github-actions · 2024-01-22T21:55:02Z

CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes.

garrettbear · 2024-01-22T22:22:54Z

ui/helpers/utils/settings-search.js

+      /(<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>',


Before & After

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

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

garrettbear · 2024-01-22T22:39:28Z

ui/pages/confirm-add-suggested-nft/index.scss

  &__nft-tokenid {
    @include H7;
-
-    color: #606060;


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

garrettbear · 2024-01-22T22:42:54Z

ui/pages/confirm-add-suggested-nft/confirm-add-suggested-nft.js

                        )}
                        <Text
                          variant={TextVariant.bodySm}
+                          color={TextColor.textAlternative}


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

garrettbear · 2024-01-22T23:43:10Z

ui/pages/confirm-add-suggested-token/confirm-add-suggested-token.js

          withRightButton
          useIcon
-          iconFillColor="#f8c000"
+          iconFillColor="var(--brand-colors-yellow-yellow600)"


@digiwand could you help me get screenshot to confirm this update worked?

garrettbear · 2024-01-23T00:01:23Z

ui/pages/institutional/connect-custody/index.scss

Before & After

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

garrettbear · 2024-01-23T00:05:00Z

ui/pages/institutional/connect-custody/index.scss


  &__item {
-    border-bottom: 1px solid #d2d8dd;
+    border-bottom: 1px solid var(--color-border-muted);


Before & After

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

…s-part-2

garrettbear · 2024-01-24T17:54:21Z

ui/pages/swaps/smart-transaction-status/arrow-icon.js

      <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)"


Subtle change

Before & After

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

garrettbear · 2024-01-24T18:17:41Z

ui/pages/swaps/smart-transaction-status/reverted-icon.js

+        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)"


Before

After

garrettbear · 2024-01-24T18:19:09Z

ui/pages/swaps/smart-transaction-status/success-icon.js

      <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)"


Before

After

codecov · 2024-01-26T00:46:54Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Comparison is base (fd7ed3c) 68.16% compared to head (96d6bc5) 68.16%.
Report is 9 commits behind head on develop.

Additional details and impacted files

@@             Coverage Diff             @@
##           develop   #22629      +/-   ##
===========================================
- Coverage    68.16%   68.16%   -0.00%     
===========================================
  Files         1087     1087              
  Lines        42691    42691              
  Branches     11358    11358              
===========================================
- Hits         29100    29099       -1     
- Misses       13591    13592       +1

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

metamaskbot · 2024-01-26T00:58:41Z

Builds ready [96d6bc5]

builds: chrome, firefox
builds (beta): chrome
builds (flask): chrome, firefox
builds (MMI): chrome, firefox
builds (test): chrome, firefox
builds (test-flask): chrome, firefox
build viz: Build System
mv3: Background Module Init Stats
mv3: UI Init Stats
mv3: Module Load Stats
mv3: Bundle Size Stats
mv2: E2e Actions Stats
code coverage: Report
storybook: Storybook
typescript migration: Dashboard
all artifacts
bundle viz:
- background: 0, 1, 2, 3, 4
- common: 0, 1, 2, 3, 4, 5, 6, 7
- content-script: 0
- contentscript: contentscript
- disable-console: disable-console
- inpage: inpage
- policy-load: policy-load
- sentry-install: sentry-install
- ui: 0, 1, 10, 11, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (753 ± 27 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	91	129	104	9	4
		domContentLoaded	9	25	16	4	2
		load	713	972	753	55	27
		domInteractive	9	25	16	4	2

Bundle size diffs

background: 0 Bytes (0.00%)
ui: 201 Bytes (0.00%)
common: 0 Bytes (0.00%)

georgewrmarshall

LGTM! I'd suggest getting @Akatori-Design to make a suggestion for the highlight in settings search to improve the contrast in dark mode

replace hex values to design tokens

ddb852d

garrettbear commented Jan 22, 2024

View reviewed changes

fix confirm add suggested nft text color

2c56642

garrettbear commented Jan 22, 2024

View reviewed changes

confirm add suggested token

e8b08a3

garrettbear commented Jan 22, 2024

View reviewed changes

update custody account list

1d1d0ff

garrettbear commented Jan 23, 2024

View reviewed changes

ui/pages/institutional/connect-custody/index.scss

Copy link

Contributor Author

garrettbear Jan 23, 2024

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

update custody account list

76cee7e

garrettbear commented Jan 23, 2024

View reviewed changes

garrettbear and others added 2 commits January 24, 2024 08:22

Merge branch 'develop' into feat/22364/update-hex-values-design-token…

757d6ba

…s-part-2

arrow icon

2d81da2

garrettbear commented Jan 24, 2024

View reviewed changes

update reverted and success icon

09a9266

garrettbear commented Jan 24, 2024

View reviewed changes

garrettbear requested a review from georgewrmarshall January 24, 2024 18:28

garrettbear added the team-design-system All issues relating to design system in Extension label Jan 24, 2024

update snapshots

96d6bc5

garrettbear marked this pull request as ready for review January 24, 2024 18:41

garrettbear requested a review from a team as a code owner January 24, 2024 18:41

darkwing approved these changes Jan 25, 2024

View reviewed changes

georgewrmarshall approved these changes Jan 27, 2024

View reviewed changes

garrettbear merged commit 0d55408 into develop Jan 29, 2024

garrettbear deleted the feat/22364/update-hex-values-design-tokens-part-2 branch January 29, 2024 16:53

github-actions bot locked and limited conversation to collaborators Jan 29, 2024

metamaskbot added the release-11.11.0 Issue or pull request that will be included in release 11.11.0 label Jan 29, 2024

Uh oh!

replace hex values to design tokens #22629

replace hex values to design tokens #22629

Uh oh!

Conversation

garrettbear commented Jan 22, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Related issues

Manual testing steps

Screenshots/Recordings

Before

After

Pre-merge author checklist

Pre-merge reviewer checklist

Uh oh!

github-actions bot commented Jan 22, 2024

Uh oh!

Choose a reason for hiding this comment

Before & After

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Before & After

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Before & After

Uh oh!

Choose a reason for hiding this comment

Before & After

Uh oh!

Choose a reason for hiding this comment

Before & After

Uh oh!

Choose a reason for hiding this comment

Before

After

Uh oh!

Choose a reason for hiding this comment

Before

After

Uh oh!

codecov bot commented Jan 26, 2024

Codecov Report

Uh oh!

metamaskbot commented Jan 26, 2024

Uh oh!

georgewrmarshall left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

garrettbear commented Jan 22, 2024 •

edited

Loading