[EXT] Test Design Token Updates in Pre-Release Branch for Extension

[garrettbear]

Description

The purpose of this ticket is to ensure that the recent updates to the design tokens, as part of our brand evolution, are correctly implemented and functioning as expected in the portfolio's pre-release branch. This involves a comprehensive testing phase to identify any discrepancies, visual or functional, that may arise from the new design token updates.

Technical Details

• The updates are located in the feature/brand-evolution-design-tokens branch.
• Testing should cover all major components affected by design tokens, including typography, color schemes, button styles, and layout spacings.
• Use both automated and manual testing strategies to cover a wide range of scenarios.
• Ensure compatibility across all supported browsers and devices.
• Any found issues should be documented with screenshots and detailed descriptions.

Acceptance Criteria

1. All major components (e.g., headers, footers, buttons, input fields) reflect the updated design tokens correctly.
2. The application maintains its responsiveness and functionality across different screen sizes and devices.
3. No visual regressions are introduced by the design token updates.
4. The application is tested across all supported browsers (Chrome, Firefox, Safari, Edge) with no compatibility issues.
5. All discovered issues are documented and reported in the GitHub repository with appropriate labels.
6. Pair with Hiro to walk through designs together to determine acceptance from design

[garrettbear]

PR: https://github.com/MetaMask/metamask-extension/pull/25268 Storybook: https://output.circle-artifacts.com/output/job/73c987ab-ee77-42f1-a5ca-5645595f007c/artifacts/0/storybook/index.html?path=/story/components-componentlibrary-button--variant Build: https://github.com/MetaMask/metamask-extension/pull/25268#issuecomment-2164030149

No errors related to design system

[georgewrmarshall]

There are a couple instances that use the JS tokens, so they haven't been updated in the test build

https://github.com/MetaMask/metamask-extension/blob/0c02dd51b767ffc1a745d962fdf7ee6f204d8330/ui/components/ui/toggle-button/toggle-button.component.js#L42-L43

[garrettbear]

Yes I cover that in my video, sorry you beat me before I could get the video loaded @georgewrmarshall

[garrettbear]

this is using a bypass by using a copy and paste of the CSS file for design tokens, but doesn't cover the JS updates https://github.com/MetaMask/design-tokens/assets/26469696/497a9ae0-e227-4eb2-9291-478b9cd991cd

[garrettbear]

This video is using yarn link so it includes the JS and CSS (toggle button uses JS)

https://github.com/MetaMask/design-tokens/assets/26469696/7a7d0ca2-f174-414b-94cc-992a4ea3f3f9

[garrettbear]

There are a couple instances that use the JS tokens, so they haven't been updated in the test build

https://github.com/MetaMask/metamask-extension/blob/0c02dd51b767ffc1a745d962fdf7ee6f204d8330/ui/components/ui/toggle-button/toggle-button.component.js#L42-L43

using yarn link

[georgewrmarshall]

Excellent videos LGTM!

[Akatori-Design]

Look good. I Approve

[brianacnguyen]

LGTM