Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

chore: updated css variables based on updated json #708

Merged
merged 15 commits into from
May 30, 2024
Merged

chore: updated css variables based on updated json #708

Show file tree
Hide file tree
Changes from 13 commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
39cc2ae
chore: updated css variables based on updated json
brianacnguyen May 29, 2024
2ca8779
refactor: updated css variable namings
brianacnguyen May 29, 2024
f451cfd
feat: added deprecated css files
brianacnguyen May 29, 2024
10ce2f0
refactor: updated migration changelist based on comments
brianacnguyen May 30, 2024
b6473d3
refactor: updated migration doc
brianacnguyen May 30, 2024
9907b98
refactor: updated title for css part in migration doc
brianacnguyen May 30, 2024
3ee2b4f
refactor: simplified deprecated tokens
brianacnguyen May 30, 2024
e05e0d9
refactor: removed deprecated colors and updated migration doc
brianacnguyen May 30, 2024
2a8bb16
refactor: updated css naming
brianacnguyen May 30, 2024
fef3953
refactor: nit changes
brianacnguyen May 30, 2024
7a8f2e0
Merge branch 'main' of https://github.com/MetaMask/design-tokens into…
brianacnguyen May 30, 2024
c3a8a22
Merge branch 'main' of https://github.com/MetaMask/design-tokens into…
brianacnguyen May 30, 2024
05ea5c5
feat: readded overlay inverse back to css variables
brianacnguyen May 30, 2024
e37ca56
docs: updating migrations doc layout
georgewrmarshall May 30, 2024
c8b61c8
chore: reverting css import order
georgewrmarshall May 30, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
55 changes: 55 additions & 0 deletions MIGRATION.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,61 @@

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

## 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
```
brianacnguyen marked this conversation as resolved.
Show resolved Hide resolved

### 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)

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 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

## From version 2.1.1 to 3.0.0
Expand Down
109 changes: 73 additions & 36 deletions src/css/brand-colors.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,22 +6,21 @@
* theme compatible styles
*/
:root {
--brand-colors-white-white000: #ffffff;
--brand-colors-white-white010: #fcfcfc;
--brand-colors-black-black000: #000000;
--brand-colors-grey-grey030: #fafbfc;
--brand-colors-grey-grey040: #f2f4f6;
/* Grey */
--brand-colors-grey-grey100: #d6d9dc;
--brand-colors-grey-grey200: #bbc0c5;
--brand-colors-grey-grey300: #9fa6ae;
--brand-colors-grey-grey400: #848c96;
--brand-colors-grey-grey500: #6a737d;
--brand-colors-grey-grey600: #535a61;
--brand-colors-grey-grey700: #3b4046;
--brand-colors-grey-grey750: #2e3339;
--brand-colors-grey-grey800: #24272a;
--brand-colors-grey-grey900: #141618;
--brand-colors-blue-blue000: #eaf6ff;
--brand-colors-grey-grey1000: #000000;
--brand-colors-grey-grey050: #f2f4f6;
--brand-colors-grey-grey000: #ffffff;
--brand-colors-grey-grey025: #fafbfc;
/* Blue */
--brand-colors-blue-blue100: #a7d9fe;
--brand-colors-blue-blue200: #75c4fd;
--brand-colors-blue-blue300: #43aefc;
Expand All @@ -31,43 +30,81 @@
--brand-colors-blue-blue700: #024272;
--brand-colors-blue-blue800: #01253f;
--brand-colors-blue-blue900: #00080d;
--brand-colors-orange-orange000: #fef5ef;
--brand-colors-orange-orange100: #fde2cf;
--brand-colors-orange-orange200: #fbc49d;
--brand-colors-orange-orange300: #faa66c;
--brand-colors-orange-orange400: #f8883b;
--brand-colors-orange-orange500: #f66a0a;
--brand-colors-orange-orange600: #bf5208;
--brand-colors-orange-orange700: #954005;
--brand-colors-orange-orange800: #632b04;
--brand-colors-orange-orange900: #321602;
--brand-colors-green-green000: #f3fcf5;
--brand-colors-green-green100: #d6ffdf;
--brand-colors-green-green200: #afecbd;
--brand-colors-green-green300: #86e29b;
--brand-colors-green-green400: #5dd879;
--brand-colors-green-green500: #28a745;
--brand-colors-green-green600: #1c8234;
--brand-colors-blue-blue050: #eaf6ff;
--brand-colors-blue-blue025: #eaf6ff;
/* Green */
--brand-colors-green-green100: #afecbd;
--brand-colors-green-green200: #5dd879;
--brand-colors-green-green300: #28a745;
--brand-colors-green-green400: #28a745;
--brand-colors-green-green500: #1c8234;
--brand-colors-green-green600: #145523;
--brand-colors-green-green700: #145523;
--brand-colors-green-green800: #0a2c12;
--brand-colors-green-green900: #041007;
--brand-colors-red-red000: #fcf2f3;
--brand-colors-green-green050: #d6ffdf;
--brand-colors-green-green025: #f3fcf5;
/* Red */
--brand-colors-red-red100: #f7d5d8;
--brand-colors-red-red200: #f1b9be;
--brand-colors-red-red300: #e88f97;
--brand-colors-red-red400: #e06470;
--brand-colors-red-red500: #d73847;
--brand-colors-red-red600: #b92534;
--brand-colors-red-red700: #8e1d28;
--brand-colors-red-red800: #64141c;
--brand-colors-red-red600: #8e1d28;
--brand-colors-red-red700: #64141c;
--brand-colors-red-red800: #3a0c10;
--brand-colors-red-red900: #3a0c10;
--brand-colors-red-red050: #fcf2f3;
--brand-colors-red-red025: #fcf2f3;
/* Yellow */
--brand-colors-yellow-yellow100: #ffdf70;
--brand-colors-yellow-yellow200: #ffc70a;
--brand-colors-yellow-yellow300: #f8883b;
--brand-colors-yellow-yellow400: #f66a0a;
--brand-colors-yellow-yellow500: #bf5208;
--brand-colors-yellow-yellow600: #954005;
--brand-colors-yellow-yellow700: #632b04;
--brand-colors-yellow-yellow800: #321602;
--brand-colors-yellow-yellow900: #321602;
--brand-colors-yellow-yellow050: #fff2c5;
--brand-colors-yellow-yellow025: #fefcde;
/* Orange */
--brand-colors-orange-orange100: #fbc49d;
--brand-colors-orange-orange200: #faa66c;
--brand-colors-orange-orange300: #f8883b;
--brand-colors-orange-orange400: #f66a0a;
--brand-colors-orange-orange500: #bf5208;
--brand-colors-orange-orange600: #954005;
--brand-colors-orange-orange700: #632b04;
--brand-colors-orange-orange800: #321602;
--brand-colors-orange-orange900: #321602;
--brand-colors-orange-orange050: #fde2cf;
--brand-colors-orange-orange025: #fef5ef;
/* Purple */
--brand-colors-purple-purple100: #efd2ff;
--brand-colors-purple-purple200: #cfb5f0;
--brand-colors-purple-purple300: #d27dff;
--brand-colors-purple-purple400: #b864f5;
--brand-colors-purple-purple500: #8b45b6;
--brand-colors-violet-violet300: #cfb5f0;
--brand-colors-yellow-yellow000: #fffdf8;
--brand-colors-yellow-yellow100: #fefcde;
--brand-colors-yellow-yellow200: #fff2c5;
--brand-colors-yellow-yellow300: #ffeaa3;
--brand-colors-yellow-yellow400: #ffdf70;
--brand-colors-yellow-yellow500: #ffd33d;
--brand-colors-yellow-yellow600: #ffc70a;
--brand-colors-purple-purple600: #6c2ab2;
--brand-colors-purple-purple700: #4c1178;
--brand-colors-purple-purple800: #32054d;
--brand-colors-purple-purple900: #280a00;
--brand-colors-purple-purple050: #fbf2ff;
--brand-colors-purple-purple025: #fcf6ff;
/* Lime */
--brand-colors-lime-lime100: #b8ef4a;
--brand-colors-lime-lime200: #95ca45;
--brand-colors-lime-lime300: #7ab040;
--brand-colors-lime-lime400: #64993d;
--brand-colors-lime-lime500: #457a39;
--brand-colors-lime-lime600: #275b35;
--brand-colors-lime-lime700: #093a31;
--brand-colors-lime-lime800: #022321;
--brand-colors-lime-lime900: #011515;
--brand-colors-lime-lime025: #effed9;
--brand-colors-lime-lime050: #e3febd;
/* White and Black */
--brand-colors-white: #ffffff;
--brand-colors-black: #000000;
}
128 changes: 83 additions & 45 deletions src/css/dark-theme-colors.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,64 +2,102 @@
* Dark Theme Colors
*/
[data-theme='dark'] {
/* For default neutral backgrounds */
--color-background-default: var(--brand-colors-grey-grey800);
--color-background-default-hover: #282b2e;
--color-background-default-pressed: #36383b;
/* For secondary neutral backgrounds. */
--color-background-alternative: var(--brand-colors-grey-grey900);
--color-background-alternative-hover: #191b1d;
--color-background-alternative-pressed: #27292a;
--color-background-hover: #ffffff05;
/* For "hover" states that use background-default. */
--color-background-default-hover: #313235;
/* For "pressed" states that use background-alternative. */
--color-background-default-pressed: #3f4145;
/* For "hover" states that use background-alternative. */
--color-background-alternative-hover: #1f2123;
/* For "pressed" states that use background-alternative. */
--color-background-alternative-pressed: #2e3033;
/* For "hover" state that use no background fill. */
--color-background-hover: #ffffff0a;
/* For "pressed" state that use no background fill. */
--color-background-pressed: #ffffff14;
--color-text-default: var(--brand-colors-white-white000);
--color-text-alternative: var(--brand-colors-grey-grey100);
/* For default neutral text. */
--color-text-default: var(--brand-colors-grey-grey000);
/* For softer contrast neutral text */
--color-text-alternative: var(--brand-colors-grey-grey200);
/* For the softest contrast neutral text (not accessible) */
--color-text-muted: var(--brand-colors-grey-grey400);
--color-icon-default: var(--brand-colors-white-white000);
/* For default neutral icons */
--color-icon-default: var(--brand-colors-grey-grey000);
/* For softer neutral icons */
--color-icon-alternative: var(--brand-colors-grey-grey200);
/* For the weakest contrast neutral icons (not accessible) */
--color-icon-muted: var(--brand-colors-grey-grey400);
/* For soft contrast neutral border */
--color-border-default: var(--brand-colors-grey-grey400);
--color-border-muted: var(--brand-colors-grey-grey700);
/* For the weakest contrast neutral border */
--color-border-muted: #848c9629;
/* For the default shade of screen */
--color-overlay-default: #00000099;
/* For a stronger shade of screen */
--color-overlay-alternative: #000000cc;
--color-shadow-default: #00000080;
--color-overlay-inverse: var(--brand-colors-white-white010);
--color-primary-default: var(--brand-colors-blue-blue400);
--color-primary-default-hover: #0092fa;
--color-primary-default-pressed: #54b6fc;
--color-primary-alternative: var(--brand-colors-blue-blue300);
--color-primary-muted: #1098fc26;
/* For elements used on top of overlay/alternative. Used for text, icon or border */
--color-overlay-inverse: var(--brand-colors-grey-grey000);
/* For interactive, active, and selected semantics. Used for text, background, icon or border */
--color-primary-default: var(--brand-colors-blue-blue300);
/* For the stronger contrast primary semantic elements. */
--color-primary-alternative: var(--brand-colors-blue-blue200);
/* For the weakest contrast primary semantic backgrounds. */
--color-primary-muted: #43aefc26;
/* For elements used on top of primary/default. Used for text, icon or border */
--color-primary-inverse: var(--brand-colors-grey-grey900);
--color-primary-disabled: #1098fc80;
--color-primary-shadow: #0376c933;
--color-secondary-default: var(--brand-colors-orange-orange400);
--color-secondary-alternative: var(--brand-colors-orange-orange300);
--color-secondary-muted: #f8883b26;
--color-secondary-inverse: var(--brand-colors-grey-grey900);
--color-secondary-disabled: #f8883b80;
--color-error-default: #ff5263;
--color-error-default-hover: #ff4d58;
--color-error-default-pressed: #f9868e;
--color-error-alternative: var(--brand-colors-red-red300);
--color-error-muted: #ff526326;
/* For the "hover" state of primary-default elements */
--color-primary-default-hover: #26a2fc;
/* For the "pressed" state of primary-default elements */
--color-primary-default-pressed: #3baafd;
/* For the critical alert semantic elements. Used for text, background, icon or border */
--color-error-default: var(--brand-colors-red-red300);
/* For the stronger contrast error semantic elements. */
--color-error-alternative: var(--brand-colors-red-red200);
/* For the weakest contrast critical alert semantic backgrounds. */
--color-error-muted: #e88f9726;
/* For elements used on top of error/default. Used for text, icon or border */
--color-error-inverse: var(--brand-colors-grey-grey900);
--color-error-disabled: #d7384780;
--color-error-shadow: #ff526366;
--color-warning-default: var(--brand-colors-yellow-yellow500);
--color-warning-default-hover: #ffc60a;
--color-warning-default-pressed: #ffeaa3d1;
--color-warning-alternative: var(--brand-colors-yellow-yellow400);
--color-warning-muted: #ffd33d26;
/* For the "hover" state of error-default elements. */
--color-error-default-hover: #e47782;
/* For the "pressed" state of error-default elements. */
--color-error-default-pressed: #e78891;
/* For the caution alert semantic elements. Used for text, background, icon or border */
--color-warning-default: var(--brand-colors-yellow-yellow100);
/* For the weakest contrast caution alert semantic backgrounds. */
--color-warning-muted: #ffdf7026;
/* For elements used on top of warning/default. Used for text, icon or border */
--color-warning-inverse: var(--brand-colors-grey-grey900);
--color-warning-disabled: #ffd33d80;
--color-success-default: var(--brand-colors-green-green500);
--color-success-default-hover: #05b82f;
--color-success-default-pressed: #6aec88;
--color-success-alternative: var(--brand-colors-green-green400);
/* For the "hover" state of warning-default elements */
--color-warning-default-hover: #ffe485;
/* For the "pressed" state of warning-default elements */
--color-warning-default-pressed: #ffe899;
/* For the positive semantic elements. Used for text, background, icon or border */
--color-success-default: var(--brand-colors-green-green300);
/* For the weakest contrast positive semantic backgrounds. */
--color-success-muted: #28a74526;
/* For elements used on top of success/default. Used for text, icon or border */
--color-success-inverse: var(--brand-colors-grey-grey900);
--color-success-disabled: #28a74580;
--color-info-default: var(--brand-colors-blue-blue400);
--color-info-alternative: var(--brand-colors-blue-blue300);
--color-info-muted: #1098fc26;
/* For the "hover" state of success-default elements */
--color-success-default-hover: #2cb94c;
/* For the "pressed" state of success-default elements */
--color-success-default-pressed: #30ca53;
/* For informational read-only elements. Used for text, background, icon or border */
--color-info-default: var(--brand-colors-blue-blue300);
/* For the weakest contrast informational semantic backgrounds. */
--color-info-muted: #43aefc26;
/* For elements used on top of info/default. Used for text, icon or border */
--color-info-inverse: var(--brand-colors-grey-grey900);
--color-info-disabled: #0376c980;
/* For Flask primary accent color. */
--color-flask-default: var(--brand-colors-purple-purple300);
/* For elements used on top of flask/default. Used for text, icon or border */
--color-flask-inverse: var(--brand-colors-grey-grey900);
/* For neutral drop shadow color. */
--color-shadow-default: #00000066;
/* For primary drop shadow color. */
--color-shadow-primary: #43aefc33;
/* For critical/danger drop shadow color. */
--color-shadow-error: #ff758466;
}
4 changes: 2 additions & 2 deletions src/css/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
@import './brand-colors.css';
@import './light-theme-colors.css';
@import './dark-theme-colors.css';
@import './typography.css';
@import './shadow.css';
@import './light-theme-colors.css';
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

reordered since some [deprecated] theme colors do reference shadow

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

@import './dark-theme-colors.css';
Loading