chore: upgrading to design tokens v4 by georgewrmarshall · Pull Request #24953 · MetaMask/metamask-extension

georgewrmarshall · 2024-05-31T19:30:31Z

Description

This pull request aims to upgrade the extension to design tokens v4. This upgrade ensures the most up-to-date colors are being used that align with design and primes the extension for the upcoming brand evolution. Included in this PR are third-party network color CSS variables that have been removed from the design tokens package and renamed CSS variables for shadow. This PR is the final update from a series of PRs that replace deprecated CSS colors that have been removed in v4.

Dependency PRs that should be merged before this one:

Related issues

Fixes: #24916

Manual testing steps

Check all removed and changed CSS variables are no longer in the codebase:

Pull this branch.
Copy this script that checks for all deprecated colors to the root of the extension.
Run node searchDeprecatedTokens.js.
Ensure there are no results.

Check shadows and network colors work as expected:

Navigate to stories that use primary and error shadows (ButtonPrimary, ButtonSecondary, Button (deprecated)) as well as network colors (Box BackgroundColors story).
Verify that shadows and network colors work as expected.
Run the extension and navigate around to ensure colors work as expected:
Pull this branch.
Run yarn start.
Navigate around the extension in light and dark mode to ensure colors work as expected.

Screenshots/Recordings

Before

Checking the codebase for any existing deprecated colors returns many results in the develop branch.

before720.mov

After

Checking the codebase for any deprecated removed colors that could break the UI using the provided script, after removing network colors, returns no results.

script.after720.mov

Checking components that use updated CSS variables and newly added still work as expected

after720.mov

Checking extension colors are working as expected in light and dark mode. In dark mode primary and error are a shade lighter in v4

after.app720.mov

Pre-merge author checklist

I’ve followed MetaMask Coding Standards.
I've completed the PR template to the best of my ability
I’ve included tests if applicable
I’ve documented my code using JSDoc format if applicable
I’ve applied the right labels on the PR (see labeling guidelines). Not required for external contributors.

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-05-31T19:30:43Z

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.

script.js

.storybook/3.COLORS.stories.mdx

socket-security · 2024-06-07T20:29:52Z

New and removed dependencies detected. Learn more about Socket for GitHub ↗︎

Package	New capabilities	Transitives	Size	Publisher
npm/@metamask/design-tokens@4.0.0	None	`0`	227 kB	metamaskbot

🚮 Removed packages: npm/@metamask/design-tokens@3.0.0

View full report↗︎

.storybook/3.COLORS.stories.mdx

.storybook/4.SHADOW.stories.mdx

georgewrmarshall · 2024-06-10T04:08:27Z

.storybook/4.SHADOW.stories.mdx

In design tokens v4, --color-primary-shadow and --color-error-shadow were changed to --color-shadow-primary and --color-shadow-error. All instances have been replaced, and primary and error shadows still work.

From the design tokens v4 Migration docs:

No instances of deprecated shadow CSS variables remain in the codebase.

Screenshot shows primary and error shadows still working after v4 upgrade:

package.json

georgewrmarshall · 2024-06-10T04:23:36Z

ui/components/component-library/button-primary/button-primary.scss

Screenshot shows shadows still working after v4 upgrade:

georgewrmarshall · 2024-06-10T04:27:04Z

ui/components/component-library/button-secondary/button-secondary.scss

Screenshot shows shadows still working after v4 upgrade:

georgewrmarshall · 2024-06-10T04:32:12Z

ui/css/utilities/colors.scss

These third party network colors have been removed from v4 of the design tokens. There was some previous thoughts that we could manage test network colors within the MetaMask brand as test networks generally don't have any branding elements attached, but ultimately they are third party entities and should be treated as such. We should treat test networks the same as other networks and use images (even if we are the ones creating those images). Eventually these should be replaced.

From design tokens v4 migration docs

I have created a ticket to remove these colors, as they are third-party colors, not widely used, and unlikely to affect the brand evolution. It's low priority: #24969

Move this to the design token v4 branch so we can ensure that they are still working in that PR

Network colors still work after upgrade

georgewrmarshall · 2024-06-10T04:32:31Z

ui/css/utilities/colors.scss

Moved above deprecated network colors

georgewrmarshall · 2024-06-10T04:32:47Z

ui/css/utilities/colors.scss

Moved up from bottom of the file to before deprecated message

georgewrmarshall · 2024-06-10T04:33:16Z

ui/components/ui/button/buttons.scss

After

Shadows still work as expected in deprecated button component

after.mov

…-shadow-primary

…hadow-error

georgewrmarshall · 2024-06-10T22:09:27Z

.storybook/3.COLORS.stories.mdx

  style={{
    textAlign: 'center',
-    backgroundColor: 'var(--brand-colors-white-white000)',
+    backgroundColor: 'var(--brand-colors-white)',


After

Background color to image still works as expected

after.mov

georgewrmarshall · 2024-06-10T22:09:44Z

.storybook/3.COLORS.stories.mdx

+var(--brand-colors-white)
+var(--brand-colors-black)
+var(--brand-colors-grey-grey800)


Updating docs to reflect correct tokens

georgewrmarshall · 2024-06-10T22:09:56Z

.storybook/3.COLORS.stories.mdx

 **/
 .card {
-  background-color: var(--brand-colors-white-white000);
+  background-color: var(--brand-colors-white);


Updating to correct token in docs

georgewrmarshall · 2024-06-10T22:14:55Z

ui/components/multichain/address-copy-button/index.scss

  height: 20px;
-  background-color: var(--brand-colors-white-white000);
+  background-color: var(--brand-colors-white);
  padding: 1px;


After

Background of custody logo is white

georgewrmarshall · 2024-06-10T22:16:56Z

ui/components/multichain/ramps-card/index.scss

  &__body {
-    color: var(--brand-colors-white-white000);
+    color: var(--brand-colors-white);
    width: 80%;


After

Ramps card text and button remain white

georgewrmarshall · 2024-06-10T22:20:59Z

ui/css/base-styles.scss

  @media (prefers-color-scheme: dark) {
    &:not([data-theme]) {
-      color: var(--brand-colors-white-white000);
+      color: var(--brand-colors-white);


This seems like the default font color for prefers color scheme dark. Check before/after screenshot of description as settings for that recording are set to system, and my system is set to dark

georgewrmarshall · 2024-06-10T22:26:52Z

ui/pages/unlock-page/index.scss

      background: var(--brand-colors-blue-blue500);
-      color: var(--brand-colors-white-white000);
+      color: var(--brand-colors-white);
      padding: 3px 6px;


After

Beta text remains white

should this be using a themed token instead?

Good question! I think originally it used brand colors here because the designer wanted the text to remain white but it would look strange once we update the colors so I'll update to theme. Updated here ddaeba1

brianacnguyen

1 small comment

bergeron · 2024-06-11T16:28:09Z

Thanks for annotating the changes so it's easier to review

codecov · 2024-06-11T17:21:53Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 65.61%. Comparing base (2b2ee43) to head (e896a84).

Additional details and impacted files

@@           Coverage Diff            @@
##           develop   #24953   +/-   ##
========================================
  Coverage    65.61%   65.61%           
========================================
  Files         1365     1365           
  Lines        54224    54224           
  Branches     14180    14180           
========================================
  Hits         35576    35576           
  Misses       18648    18648

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

metamaskbot · 2024-06-11T17:33:27Z

Builds ready [e896a84]

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, 5
- common: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9
- content-script: 0
- offscreen: 0
- ui: 0, 1, 10, 11, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (144 ± 182 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	75	124	90	13	6
		domContentLoaded	8	17	12	2	1
		load	40	1798	144	380	182
		domInteractive	8	17	12	2	1

Bundle size diffs

background: 0 Bytes (0.00%)
ui: 484 Bytes (0.01%)
common: 0 Bytes (0.00%)

georgewrmarshall added DO-NOT-MERGE Pull requests that should not be merged team-design-system All issues relating to design system in Extension labels May 31, 2024

georgewrmarshall self-assigned this May 31, 2024

github-advanced-security bot found potential problems May 31, 2024

View reviewed changes

script.js Fixed Show fixed Hide fixed

georgewrmarshall force-pushed the upgrade/design-tokens-v4 branch from e9c8431 to c155149 Compare May 31, 2024 19:45

georgewrmarshall commented May 31, 2024

View reviewed changes

.storybook/3.COLORS.stories.mdx Outdated Show resolved Hide resolved

georgewrmarshall commented May 31, 2024

View reviewed changes

.storybook/3.COLORS.stories.mdx Show resolved Hide resolved

georgewrmarshall force-pushed the upgrade/design-tokens-v4 branch 2 times, most recently from 583de3c to dadff43 Compare June 7, 2024 20:28

georgewrmarshall changed the title ~~chore: removing deprecated colors for design tokens v4 upgrade~~ chore: upgrading to design tokens v4 Jun 7, 2024

georgewrmarshall commented Jun 7, 2024

View reviewed changes

.storybook/3.COLORS.stories.mdx Outdated Show resolved Hide resolved

georgewrmarshall commented Jun 7, 2024

View reviewed changes

.storybook/4.SHADOW.stories.mdx Outdated Show resolved Hide resolved

georgewrmarshall commented Jun 7, 2024

View reviewed changes

.storybook/4.SHADOW.stories.mdx Outdated Show resolved Hide resolved

georgewrmarshall force-pushed the upgrade/design-tokens-v4 branch from 428ae98 to b376466 Compare June 10, 2024 03:47

georgewrmarshall commented Jun 10, 2024

View reviewed changes

package.json Outdated Show resolved Hide resolved

georgewrmarshall commented Jun 10, 2024

View reviewed changes

georgewrmarshall removed the DO-NOT-MERGE Pull requests that should not be merged label Jun 10, 2024

georgewrmarshall added 5 commits June 10, 2024 15:04

chore: upgrading to design tokens v4

e64c380

chore: replacing all instances of --color-primary-shadow with --color…

f9423f4

…-shadow-primary

chore: replacing all instances of --color-error-shadow with --color-s…

e5b560b

…hadow-error

chore: adding localhost network colors

edcb5ea

chore: adding deprecation message and rearranging color css variables

362fbb2

georgewrmarshall commented Jun 10, 2024

View reviewed changes

georgewrmarshall requested review from brianacnguyen and garrettbear June 10, 2024 22:38

chore: updating snapshots

20b6806

brianacnguyen reviewed Jun 10, 2024

View reviewed changes

chore: updating beta logo to use theme colors

ddaeba1

brianacnguyen previously approved these changes Jun 10, 2024

View reviewed changes

georgewrmarshall added the needs-assets-ux-review A shared label between the Assets and UX team to flag PRs ready for consolidated team review. label Jun 11, 2024

garrettbear previously approved these changes Jun 11, 2024

View reviewed changes

Merge branch 'develop' into upgrade/design-tokens-v4

47b06f5

fix: update snapshot test

e896a84

georgewrmarshall dismissed stale reviews from garrettbear and brianacnguyen via e896a84 June 11, 2024 16:35

georgewrmarshall requested review from brianacnguyen and garrettbear June 11, 2024 16:35

garrettbear approved these changes Jun 11, 2024

View reviewed changes

brianacnguyen approved these changes Jun 11, 2024

View reviewed changes

georgewrmarshall merged commit 8a04980 into develop Jun 11, 2024

georgewrmarshall deleted the upgrade/design-tokens-v4 branch June 11, 2024 17:37

github-actions bot locked and limited conversation to collaborators Jun 11, 2024

metamaskbot added the release-12.1.0 Issue or pull request that will be included in release 12.1.0 label Jun 11, 2024

Conversation

georgewrmarshall commented May 31, 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 May 31, 2024

Uh oh!

Uh oh!

Uh oh!

Uh oh!

socket-security bot commented Jun 7, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

georgewrmarshall Jun 10, 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!

Uh oh!

georgewrmarshall Jun 10, 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!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

georgewrmarshall Jun 10, 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

After

Uh oh!

Choose a reason for hiding this comment

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

After

Uh oh!

Choose a reason for hiding this comment

After

Uh oh!

georgewrmarshall Jun 10, 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

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!

brianacnguyen left a comment

Choose a reason for hiding this comment

Uh oh!

bergeron commented Jun 11, 2024

Uh oh!

codecov bot commented Jun 11, 2024

Codecov Report

Uh oh!

metamaskbot commented Jun 11, 2024

georgewrmarshall commented May 31, 2024 •

edited

Loading

socket-security bot commented Jun 7, 2024 •

edited

Loading

georgewrmarshall Jun 10, 2024 •

edited

Loading

georgewrmarshall Jun 10, 2024 •

edited

Loading

georgewrmarshall Jun 10, 2024 •

edited

Loading

georgewrmarshall Jun 10, 2024 •

edited

Loading