feat: color updates to the design tokens package by georgewrmarshall · Pull Request #230 · MetaMask/metamask-design-system

georgewrmarshall · 2024-11-28T19:33:46Z

Description

This PR introduces updates to the Figma, CSS, and JS design tokens for improved accessibility, consistency, and usability across both Light and Dark themes. Key changes include updates to border and icon colors, the addition of new background color tokens, and alignment of descriptions with the latest in Figma. Migrated from MetaMask/design-tokens#741

Details

Light Theme Updates

Border:
- Updated border.default from {grey.200} to {grey.400} for improved accessibility.
Icons:
- Linked icons to text color tokens:
  - icon.default: {grey.900} → {text.default}
  - icon.alternative: {grey.500} → {text.alternative}
  - icon.muted: {grey.300} → {text.muted}
New Colors Added:
- background-muted: {grey.050}
- background-muted-hover: #E7EBEE
- background-muted-pressed: #DBE0E6
Descriptions:
- Updated most descriptions to match the latest designs in Figma.

Dark Theme Updates

Background:
- Darkened defaults for better contrast:
  - background-default: {grey.800} → {grey.900}
  - background-alternative: {grey.900} → {grey.1000}
- Updated hover and pressed states:
  - background-default-hover: #313235 → #1E2124
  - background-default-pressed: #3F4145 → #272B2F
  - background-alternative-hover: #1F2123 → #0A0A0A
  - background-alternative-pressed: #2E3033 → #141414
Border:
- Adjusted border.default from {grey.400} to {grey.500} to align with Light theme contrast levels.
Text:
- Improved contrast for better readability:
  - text.alternative: {grey.200} → {grey.300}
  - text.muted: {grey.400} → {grey.500}
Icons:
- Linked icons to text color tokens:
  - icon.default: {grey.000} → {text.default}
  - icon.alternative: {grey.300} → {text.alternative}
  - icon.muted: {grey.500} → {text.muted}
New Colors Added:
- background-muted: {grey.800}
- background-muted-hover: #2D3034
- background-muted-pressed: #363B3F
Descriptions:
- Updated most descriptions to match the latest designs in Figma.

Related Issues

Fixes: #181

Manual Testing Steps

Run Storybook:
- Execute yarn storybook in your terminal.
- Navigate to the Design Tokens > Theme Colors section.
- Verify updates for both Light and Dark themes:
  - Updated color values match the PR specifications.
  - Descriptions align with the latest Figma updates.
Test new color tokens updates in mobile, extension and portfolio
Validate VSCode Intellisense for JS tokens:

Screenshots/Recordings

Storybook

After

Updated colors are reflected in storybook for Figma, JSinCSS and CSS theme colors

after720.mov

Mobile

Mobile: Design token updates working as expected for light and dark mode

Before

before720.mov

After

after720.mov

Extension

Extension: Design token updates working as expected for light and dark mode

Before

before720.mov

After

after720.mov

Portfolio

Portfolio: Design token updates working as expected for light and dark mode

Before

before720.mov

After

after720.mov

Intellisense

After

Intellisense working for theme types

comment.check720.mov

Pre-merge Checklist

Followed [MetaMask Coding Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/CODING_GUIDELINES.md).
Updated documentation or references to token usage if needed.
Included appropriate tests for changes.
Applied relevant labels.

georgewrmarshall · 2024-12-03T21:59:08Z

+    muted: 'var(--color-background-muted)',
+    'muted-hover': 'var(--color-background-muted-hover)',
+    'muted-pressed': 'var(--color-background-muted-pressed)',


Adding the new background-muted to the Tailwind preset. A test initially failed when the new background-muted CSS variables were added to the design tokens, which is great!

georgewrmarshall · 2024-12-03T23:33:41Z

@metamaskbot publish-preview

github-actions · 2024-12-03T23:34:50Z

Preview builds have been published. See these instructions for more information about preview builds.

Expand for full list of packages and versions.

{
  "@metamask-previews/design-system-react": "0.0.0-preview.019292f",
  "@metamask-previews/design-system-react-native": "0.0.0-preview.019292f",
  "@metamask-previews/design-system-tailwind-preset": "0.0.0-preview.019292f",
  "@metamask-previews/design-system-twrnc-preset": "0.0.0-preview.019292f",
  "@metamask-previews/design-tokens": "4.1.0-preview.019292f"
}

georgewrmarshall · 2024-12-03T23:37:02Z

+  shadow: {
+    /** For neutral drop shadow color */
+    default: string;
+    /** For primary drop shadow color */
+    primary: string;
+    /** For critical/danger drop shadow color */
+    error: string;
+  };


Adding missing shadow type

georgewrmarshall · 2024-12-03T23:37:21Z

@@ -23,225 +23,133 @@ export type ThemeShadows = {



Updating descriptions to match Figma

georgewrmarshall · 2024-12-03T23:37:33Z

@@ -7,27 +7,27 @@ const designTokens = require('../../../figma/tokens.json');
 describe('Shadows', () => {


Fixing tests

georgewrmarshall · 2024-12-03T23:37:44Z

@@ -8,7 +8,9 @@ describe('Light Theme', () => {
  it('color tokens are exported from lightTheme by checking a random color token', () => {


Fixing tests

georgewrmarshall · 2024-12-03T23:38:02Z

@@ -3,76 +3,131 @@ import type { ThemeColors } from '../types';



Improving comments and aligning to Figma

georgewrmarshall · 2024-12-03T23:38:12Z

@@ -30,11 +30,13 @@ function resolveColorReferences(
      if (match) {


Improving tests

georgewrmarshall · 2024-12-03T23:38:20Z

@@ -8,7 +8,9 @@ describe('dark Theme', () => {
  it('color tokens are exported from darkTheme by checking a random color token', () => {


Improving tests

georgewrmarshall · 2024-12-03T23:38:37Z

@@ -3,76 +3,131 @@ import type { ThemeColors } from '../types';



Improving comments and aligning with updated Figma comments

georgewrmarshall · 2024-12-03T23:38:47Z

@@ -30,11 +30,13 @@ function resolveColorReferences(
      if (match) {


Improving tests

georgewrmarshall · 2024-12-03T23:39:18Z

@@ -4,283 +4,301 @@
      "value": "{grey.000}",


Updating comments and adding background muted colors

georgewrmarshall · 2024-12-03T23:39:39Z

@@ -1,286 +1,304 @@
 {


Updating comments and adding background muted

georgewrmarshall · 2024-12-03T23:39:48Z

@@ -26,11 +26,13 @@ describe('Light Theme Colors CSS', () => {
              throw new Error(`Invalid color or shade: ${value as string}`);


Improving tests

georgewrmarshall · 2024-12-03T23:40:11Z

@@ -4,102 +4,108 @@
 :root,


Updating comments to align with figma and adding background muted

georgewrmarshall · 2024-12-03T23:40:20Z

@@ -26,11 +26,13 @@ describe('Dark Theme Colors CSS', () => {
              throw new Error(`Invalid color or shade: ${value as string}`);


Improving tests

georgewrmarshall · 2024-12-03T23:40:43Z

@@ -3,102 +3,108 @@
 */


Updating comments and colors as well as adding background muted

brianacnguyen · 2024-12-04T17:03:40Z

-    hover: '#ffffff0a', // For "hover" state that use no background fill.
-    pressed: '#ffffff14', // For "pressed" state that use no background fill.
+    /** For default neutral surface (#24272A) */
+    default: brandColor.grey900,


Akatori-Design · 2024-12-04T22:51:24Z

Approved!

# Release 1.0.0 ## Description This PR prepares the release of version 1.0.0 of the design system packages. ## Changes - feat: color updates to the design tokens package ([#230](#230)) - `@metamask/design-tokens` package migrated from standalone repository into the design system monorepo ([128](#128)) ## Release Process Checklist - [x] Branch named `release/1.0.0` created - [x] Changelogs updated and validated - [x] Dependencies updated to latest versions (`yarn constraints --fix && yarn && yarn dedupe`) - [x] PR review and testing completed - [x] Ready for "Squash & Merge" with commit message "Release 1.0.0" ## Post-Merge Steps 1. The `publish-release` GitHub Action will tag the release 2. NPM publishing requires approval from the `npm-publishers` team 3. Verify package publication on [NPM](https://npms.io/search?q=scope%3Ametamask)

georgewrmarshall added the team-design-system label Nov 28, 2024

georgewrmarshall self-assigned this Nov 28, 2024