chore: updated css variables based on updated json #708

brianacnguyen · 2024-05-29T22:37:58Z

Description

This PR seeks to update the list of CSS variables based on the updated JSON
Breaking changes were also added to the migration doc

Related issues

Fixes: N/A

Manual testing steps

Go to storybook
Checkout the new colors!

Screenshots/Recordings

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.

metamaskbot · 2024-05-29T22:38:27Z

Builds ready [39cc2ae]

Storybook: Storybook

metamaskbot · 2024-05-29T22:46:17Z

Builds ready [2ca8779]

Storybook: Storybook

brianacnguyen · 2024-05-29T23:42:21Z

src/css/dark-theme-colors-deprecated.css

+  --color-network-localhost-default: var(--brand-colors-grey-grey200);
+  --color-network-localhost-inverse: var(--brand-colors-white-white010);
+  --color-network-sepolia-default: var(--brand-colors-violet-violet300);
+  --color-network-sepolia-inverse: var(--brand-colors-white-white010);


apparently dark theme never had these network and shadow colors to begin with. adding them to deprecated for now to be safe

brianacnguyen · 2024-05-29T23:42:59Z

src/css/index.css

+@import './brand-colors-deprecated.css';
 @import './typography.css';
 @import './shadow.css';
+@import './light-theme-colors.css';


reordered since some [deprecated] theme colors do reference shadow

I think these can be reverted as there is no more deprecated classnames

metamaskbot · 2024-05-29T23:44:45Z

Builds ready [f451cfd]

Storybook: Storybook

georgewrmarshall

Looking good! Left some comments for the migrations docs

MIGRATION.md

metamaskbot · 2024-05-30T01:04:15Z

Builds ready [10ce2f0]

Storybook: Storybook

metamaskbot · 2024-05-30T06:54:50Z

Builds ready [b6473d3]

Storybook: Storybook

metamaskbot · 2024-05-30T06:58:10Z

Builds ready [9907b98]

Storybook: Storybook

metamaskbot · 2024-05-30T07:01:54Z

Builds ready [3ee2b4f]

Storybook: Storybook

georgewrmarshall

Looking good! I have posted about version numbers in team chat this will impact whether we take the deprecation or breaking change route

MIGRATION.md

metamaskbot · 2024-05-30T18:42:33Z

Builds ready [e05e0d9]

Storybook: Storybook

metamaskbot · 2024-05-30T18:43:03Z

Builds ready [fef3953]

Storybook: Storybook

metamaskbot · 2024-05-30T18:43:13Z

Builds ready [2a8bb16]

Storybook: Storybook

… css-tokens-update

metamaskbot · 2024-05-30T22:49:16Z

Builds ready [05ea5c5]

Storybook: Storybook

georgewrmarshall

Could suggestions otherwise it LGTM

georgewrmarshall · 2024-05-30T23:13:39Z

MIGRATION.md

+## From version 3.0.0 to 4.0.0
+
+## Migration from Version 3.0.0 to 4.0.0
+
+### Changes to Color Tokens (Breaking Changes)
+
+In this version, significant updates have been made to color tokens, including modifications and removals. To upgrade to version 4, ensure that the following tokens are not present in your codebase:
+
+### Brand Colors
+
+#### CSS Variables
+
+```
+--brand-colors-grey-grey030 modified to --brand-colors-grey-grey025
+--brand-colors-grey-grey040 modified to --brand-colors-grey-grey050
+--brand-colors-grey-grey750 removed
+--brand-colors-blue-blue000 modified to --brand-colors-blue-blue025
+--brand-colors-green-green000 modified to --brand-colors-green-green025
+--brand-colors-red-red000 modified to --brand-colors-red-red025
+--brand-colors-yellow-yellow000 modified to --brand-colors-yellow-yellow025
+--brand-colors-orange-orange000 modified to --brand-colors-orange-orange025
+--brand-colors-violet-violet300 removed
+--brand-colors-white-white000 modified to --brand-colors-white
+--brand-colors-white-white010 removed
+--brand-colors-black-black000 modified to --brand-colors-black
+```
+
+### Themed Colors
+
+#### CSS Variables
+
+```
+--color-primary-shadow modified to --color-shadow-primary
+--color-primary-disabled removed
+--color-secondary-default removed
+--color-secondary-alternative removed
+--color-secondary-muted removed
+--color-secondary-inverse removed
+--color-secondary-disabled removed
+--color-error-shadow modified to --color-shadow-primary
+--color-error-disabled removed
+--color-warning-alternative removed
+--color-warning-disabled removed
+--color-success-alternative removed
+--color-success-disabled removed
+--color-info-alternative removed
+--color-info-disabled removed
+--color-network-goerli-default removed
+--color-network-goerli-inverse removed
+--color-network-localhost-default removed
+--color-network-localhost-inverse removed
+--color-network-sepolia-default removed
+--color-network-sepolia-inverse removed
+```
+
 - [From version 2.1.1 to 3.0.0](#from-version-211-to-300)



What about this

Migration Guide

This guide provides detailed instructions for migrating your project from one version of the @metamask/design-tokens to another.

From version 2.1.1 to 3.0.0

From version 3.0.0 to 4.0.0

From version 3.0.0 to 4.0.0

Changes to Color Tokens (Breaking Changes)

In this version, significant updates have been made to color tokens, including modifications and removals. To upgrade to version 4, ensure that the following tokens have been updated in your codebase:

Removed

CSS

### Brand colors --brand-colors-grey-grey750 --brand-colors-violet-violet300 --brand-colors-white-white010 ### Theme colors --color-primary-disabled --color-secondary-default --color-secondary-alternative --color-secondary-muted --color-secondary-inverse --color-secondary-disabled --color-error-disabled --color-warning-alternative --color-warning-disabled --color-success-alternative --color-success-disabled --color-info-alternative --color-info-disabled --color-network-goerli-default --color-network-goerli-inverse --color-network-localhost-default --color-network-localhost-inverse --color-network-sepolia-default --color-network-sepolia-inverse ### Component colors --component-button-primary-shadow --component-button-danger-shadow

JS

TBC

Changed

CSS

### Brand colors --brand-colors-grey-grey030 modified to --brand-colors-grey-grey025 --brand-colors-grey-grey040 modified to --brand-colors-grey-grey050 --brand-colors-blue-blue000 modified to --brand-colors-blue-blue025 --brand-colors-green-green000 modified to --brand-colors-green-green025 --brand-colors-red-red000 modified to --brand-colors-red-red025 --brand-colors-yellow-yellow000 modified to --brand-colors-yellow-yellow025 --brand-colors-orange-orange000 modified to --brand-colors-orange-orange025 --brand-colors-white-white000 modified to --brand-colors-white --brand-colors-black-black000 modified to --brand-colors-black ## Theme colors --color-primary-shadow modified to --color-shadow-primary --color-error-shadow modified to --color-shadow-primary

JS

TBC

georgewrmarshall · 2024-05-30T23:17:51Z

src/css/index.css

+@import './brand-colors-deprecated.css';
 @import './typography.css';
 @import './shadow.css';
+@import './light-theme-colors.css';


I think these can be reverted as there is no more deprecated classnames

georgewrmarshall

LGTM! 🔥 🚀

metamaskbot · 2024-05-30T23:35:07Z

Builds ready [c8b61c8]

Storybook: Storybook

chore: updated css variables based on updated json

39cc2ae

brianacnguyen added color Tokens related to color team-design-system All issues relating to design system labels May 29, 2024

brianacnguyen self-assigned this May 29, 2024

brianacnguyen requested a review from a team May 29, 2024 22:37

refactor: updated css variable namings

2ca8779

feat: added deprecated css files

f451cfd

brianacnguyen commented May 29, 2024

View reviewed changes

georgewrmarshall suggested changes May 29, 2024

View reviewed changes

MIGRATION.md Outdated Show resolved Hide resolved

MIGRATION.md Outdated Show resolved Hide resolved

MIGRATION.md Outdated Show resolved Hide resolved

MIGRATION.md Outdated Show resolved Hide resolved

MIGRATION.md Outdated Show resolved Hide resolved

MIGRATION.md Show resolved Hide resolved

refactor: updated migration changelist based on comments

10ce2f0

brianacnguyen requested a review from georgewrmarshall May 30, 2024 01:02

refactor: updated migration doc

b6473d3

refactor: updated title for css part in migration doc

9907b98

refactor: simplified deprecated tokens

3ee2b4f

georgewrmarshall reviewed May 30, 2024

View reviewed changes

MIGRATION.md Outdated Show resolved Hide resolved

MIGRATION.md Show resolved Hide resolved

brianacnguyen added 3 commits May 30, 2024 11:12

refactor: removed deprecated colors and updated migration doc

e05e0d9

refactor: updated css naming

2a8bb16

refactor: nit changes

fef3953

Merge branch 'main' of https://github.com/MetaMask/design-tokens into…

7a8f2e0

… css-tokens-update

brianacnguyen added 2 commits May 30, 2024 15:36

Merge branch 'main' of https://github.com/MetaMask/design-tokens into…

c3a8a22

… css-tokens-update

feat: readded overlay inverse back to css variables

05ea5c5

brianacnguyen requested a review from georgewrmarshall May 30, 2024 22:42

georgewrmarshall reviewed May 30, 2024

View reviewed changes

georgewrmarshall added 2 commits May 30, 2024 16:32

docs: updating migrations doc layout

e37ca56

chore: reverting css import order

c8b61c8

georgewrmarshall approved these changes May 30, 2024

View reviewed changes

georgewrmarshall merged commit 4e66c65 into main May 30, 2024

georgewrmarshall deleted the css-tokens-update branch May 30, 2024 23:35

georgewrmarshall mentioned this pull request May 30, 2024

Feat/brand colors figma variables #698

Closed

13 tasks

chore: updated css variables based on updated json #708

chore: updated css variables based on updated json #708

Uh oh!

Conversation

brianacnguyen commented May 29, 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!

metamaskbot commented May 29, 2024

Uh oh!

metamaskbot commented May 29, 2024

Uh oh!

brianacnguyen May 29, 2024

Choose a reason for hiding this comment

Uh oh!

brianacnguyen May 29, 2024

Choose a reason for hiding this comment

Uh oh!

georgewrmarshall May 30, 2024

Choose a reason for hiding this comment

Uh oh!

metamaskbot commented May 29, 2024

Uh oh!

georgewrmarshall left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

metamaskbot commented May 30, 2024

Uh oh!

metamaskbot commented May 30, 2024

Uh oh!

metamaskbot commented May 30, 2024

Uh oh!

metamaskbot commented May 30, 2024

Uh oh!

georgewrmarshall left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

metamaskbot commented May 30, 2024

Uh oh!

metamaskbot commented May 30, 2024

Uh oh!

metamaskbot commented May 30, 2024

Uh oh!

metamaskbot commented May 30, 2024

Uh oh!

georgewrmarshall left a comment

Choose a reason for hiding this comment

Uh oh!

georgewrmarshall May 30, 2024

Choose a reason for hiding this comment

Migration Guide

From version 3.0.0 to 4.0.0

Changes to Color Tokens (Breaking Changes)

Removed

CSS

JS

Changed

CSS

JS

Uh oh!

georgewrmarshall May 30, 2024

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!

brianacnguyen commented May 29, 2024 •

edited

Loading

georgewrmarshall left a comment •

edited

Loading