replace hex values with design tokens by garrettbear · Pull Request #22585 · MetaMask/metamask-extension

garrettbear · 2024-01-17T22:27:40Z

Description

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.

Related issues

Fixes: #22363

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

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-17T22:27:52Z

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-17T22:29:30Z

ui/components/app/confirm/header/header.scss

 .confirm_header {
  &__wrapper {
-    box-shadow: 0 2px 16px 0 #0000001a;
+    box-shadow: var(--shadow-size-md) var(--color-shadow-default);


This improves the dark mode as well

Before

After

garrettbear · 2024-01-17T23:55:46Z

ui/components/ui/icon/preloader/preloader-icon.component.js

Subtle change in the lighter color

Before & After

Screen.Recording.2024-01-17.at.3.45.57.PM.mov

garrettbear · 2024-01-18T01:22:12Z

ui/components/ui/toggle-button/toggle-button.component.js

+    base: '#037DD6', // var(--brand-colors-blue-blue500)
  },
  inactiveThumb: {
-    base: '#6A737D',
+    base: '#6A737D', // var(--brand-colors-grey-grey500)
  },
  active: {
-    base: '#F2F4F6',
-    hover: '#F2F4F6',
+    base: '#F2F4F6', // var(--brand-colors-grey-grey040)
+    hover: '#F2F4F6', // var(--brand-colors-grey-grey040)
  },
  inactive: {
-    base: '#F2F4F6',
-    hover: '#F2F4F6',
+    base: '#F2F4F6', // var(--brand-colors-grey-grey040)
+    hover: '#F2F4F6', // var(--brand-colors-grey-grey040)


Since you have to pass hex values here, I am just commenting the design token variable that aligns with these colors

garrettbear · 2024-01-18T23:47:23Z

ui/css/design-system/index.scss

All colors no longer used. See comment above

garrettbear · 2024-01-18T23:48:14Z

ui/css/design-system/deprecated-colors.scss

All 4 colors are no longer being used

garrettbear · 2024-01-18T23:49:30Z

ui/pages/settings/settings-tab/index.scss

-    border-color: lighten($monzo, 10%);
+    border-color: var(--color-error-muted);
    color: var(--color-error-default);

    &:active {
-      background: lighten($monzo, 55%);
+      background: var(--color-error-muted-pressed);


SettingsTab seems to no longer be used, but I am just updating the style sheet here so the deprecated colors can be fully removed. This was the last item holding it back.

Looks like that className is used here so good to update

metamask-extension/ui/pages/settings/advanced-tab/advanced-tab.component.js

Line 222 in 8782d2c

className="settings-tab__button--red"

garrettbear · 2024-01-18T23:53:27Z

ui/components/ui/icon/preloader/preloader-icon.component.js

Before & After

Screen.Recording.2024-01-17.at.3.45.57.PM.mov

garrettbear · 2024-01-19T00:10:50Z

ui/components/ui/icon/preloader/preloader-icon.component.js

Subtle change in the lighter color

Before & After

Screen.Recording.2024-01-17.at.3.45.57.PM.mov

non-blocking: I suppose there is no color prop for this component so it's not wired up to the controls.

Ya the controls on that component and not right, but that's out of scope for this project.

georgewrmarshall

Looking good! One suggestion for the Preloader component

Checked for no instances of deprecated colors ✅

ui/components/ui/icon/preloader/preloader-icon.component.js

Co-authored-by: George Marshall <george.marshall@consensys.net>

georgewrmarshall

LGTM 🚀

metamaskbot · 2024-01-23T19:26:12Z

Builds ready [7120759]

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 (704 ± 16 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	85	113	96	6	3
		domContentLoaded	8	14	11	2	1
		load	672	802	704	32	16
		domInteractive	8	14	11	2	1

Bundle size diffs

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

replace hex values with design tokens

24187fb

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

garrettbear commented Jan 17, 2024

View reviewed changes

update preloader icon

8f3ae9d

garrettbear commented Jan 17, 2024

View reviewed changes

garrettbear added 3 commits January 17, 2024 17:21

commenting tokens thats align with toggle

a854be4

remove deprecated colors file

a39af17

update snapshot

b8a5264

garrettbear commented Jan 18, 2024

View reviewed changes

garrettbear requested a review from georgewrmarshall January 18, 2024 23:55

garrettbear marked this pull request as ready for review January 18, 2024 23:55

garrettbear requested a review from a team as a code owner January 18, 2024 23:55

update snapshot

8782d2c

garrettbear commented Jan 19, 2024

View reviewed changes

georgewrmarshall reviewed Jan 23, 2024

View reviewed changes

ui/components/ui/icon/preloader/preloader-icon.component.js Outdated Show resolved Hide resolved

ui/components/ui/icon/preloader/preloader-icon.component.js Outdated Show resolved Hide resolved

ui/components/ui/icon/preloader/preloader-icon.component.js Outdated Show resolved Hide resolved

garrettbear and others added 3 commits January 23, 2024 09:07

Update ui/components/ui/icon/preloader/preloader-icon.component.js

f9af39d

Co-authored-by: George Marshall <george.marshall@consensys.net>

Update ui/components/ui/icon/preloader/preloader-icon.component.js

72cdd5c

Co-authored-by: George Marshall <george.marshall@consensys.net>

Update ui/components/ui/icon/preloader/preloader-icon.component.js

7f775ba

Co-authored-by: George Marshall <george.marshall@consensys.net>

garrettbear requested a review from georgewrmarshall January 23, 2024 17:16

update snapshots

7120759

georgewrmarshall approved these changes Jan 23, 2024

View reviewed changes

darkwing approved these changes Jan 23, 2024

View reviewed changes

garrettbear merged commit 417063d into develop Jan 23, 2024

garrettbear deleted the feat/22363/update-hex-values-design-tokens-part-1 branch January 23, 2024 19:23

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

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

Conversation

garrettbear commented Jan 17, 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 17, 2024

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

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

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!

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

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

georgewrmarshall left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

georgewrmarshall left a comment

Choose a reason for hiding this comment

Uh oh!

metamaskbot commented Jan 23, 2024

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

garrettbear commented Jan 17, 2024 •

edited

Loading

georgewrmarshall Jan 23, 2024 •

edited

Loading

georgewrmarshall left a comment •

edited

Loading