Skip to content
This repository was archived by the owner on Nov 26, 2024. It is now read-only.

Commit 4e66c65

Browse files
brianacnguyengeorgewrmarshall
brianacnguyen
and
georgewrmarshall
authored
chore: updated css variables based on updated json (#708)
* chore: updated css variables based on updated json * refactor: updated css variable namings * feat: added deprecated css files * refactor: updated migration changelist based on comments * refactor: updated migration doc * refactor: updated title for css part in migration doc * refactor: simplified deprecated tokens * refactor: removed deprecated colors and updated migration doc * refactor: updated css naming * refactor: nit changes * feat: readded overlay inverse back to css variables * docs: updating migrations doc layout * chore: reverting css import order --------- Co-authored-by: georgewrmarshall <george.marshall@consensys.net>
1 parent 4d78b11 commit 4e66c65

File tree

4 files changed

+318
-144
lines changed

4 files changed

+318
-144
lines changed

‎MIGRATION.md‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,82 @@
33
This guide provides detailed instructions for migrating your project from one version of the `@metamask/design-tokens` to another.
44

55
- [From version 2.1.1 to 3.0.0](#from-version-211-to-300)
6+
- [From version 3.0.0 to 4.0.0](#from-version-300-to-400)
7+
8+
## From version 3.0.0 to 4.0.0
9+
10+
### Changes to Color Tokens (Breaking Changes)
11+
12+
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:
13+
14+
### Removed
15+
16+
#### CSS
17+
18+
```
19+
### Brand colors
20+
--brand-colors-grey-grey750
21+
--brand-colors-violet-violet300
22+
--brand-colors-white-white010
23+
24+
### Theme colors
25+
--color-primary-disabled
26+
--color-secondary-default
27+
--color-secondary-alternative
28+
--color-secondary-muted
29+
--color-secondary-inverse
30+
--color-secondary-disabled
31+
--color-error-disabled
32+
--color-warning-alternative
33+
--color-warning-disabled
34+
--color-success-alternative
35+
--color-success-disabled
36+
--color-info-alternative
37+
--color-info-disabled
38+
--color-network-goerli-default
39+
--color-network-goerli-inverse
40+
--color-network-localhost-default
41+
--color-network-localhost-inverse
42+
--color-network-sepolia-default
43+
--color-network-sepolia-inverse
44+
45+
### Component colors
46+
--component-button-primary-shadow
47+
--component-button-danger-shadow
48+
```
49+
50+
#### JS
51+
52+
```
53+
TBC
54+
```
55+
56+
### Changed
57+
58+
#### CSS
59+
60+
```
61+
### Brand colors
62+
--brand-colors-grey-grey030 modified to --brand-colors-grey-grey025
63+
--brand-colors-grey-grey040 modified to --brand-colors-grey-grey050
64+
--brand-colors-blue-blue000 modified to --brand-colors-blue-blue025
65+
--brand-colors-green-green000 modified to --brand-colors-green-green025
66+
--brand-colors-red-red000 modified to --brand-colors-red-red025
67+
--brand-colors-yellow-yellow000 modified to --brand-colors-yellow-yellow025
68+
--brand-colors-orange-orange000 modified to --brand-colors-orange-orange025
69+
--brand-colors-white-white000 modified to --brand-colors-white
70+
--brand-colors-black-black000 modified to --brand-colors-black
71+
72+
## Theme colors
73+
--color-primary-shadow modified to --color-shadow-primary
74+
--color-error-shadow modified to --color-shadow-primary
75+
```
76+
77+
#### JS
78+
79+
```
80+
TBC
81+
```
682

783
## From version 2.1.1 to 3.0.0
884

‎src/css/brand-colors.css‎

Lines changed: 73 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -6,22 +6,21 @@
66
* theme compatible styles
77
*/
88
:root {
9-
--brand-colors-white-white000: #ffffff;
10-
--brand-colors-white-white010: #fcfcfc;
11-
--brand-colors-black-black000: #000000;
12-
--brand-colors-grey-grey030: #fafbfc;
13-
--brand-colors-grey-grey040: #f2f4f6;
9+
/* Grey */
1410
--brand-colors-grey-grey100: #d6d9dc;
1511
--brand-colors-grey-grey200: #bbc0c5;
1612
--brand-colors-grey-grey300: #9fa6ae;
1713
--brand-colors-grey-grey400: #848c96;
1814
--brand-colors-grey-grey500: #6a737d;
1915
--brand-colors-grey-grey600: #535a61;
2016
--brand-colors-grey-grey700: #3b4046;
21-
--brand-colors-grey-grey750: #2e3339;
2217
--brand-colors-grey-grey800: #24272a;
2318
--brand-colors-grey-grey900: #141618;
24-
--brand-colors-blue-blue000: #eaf6ff;
19+
--brand-colors-grey-grey1000: #000000;
20+
--brand-colors-grey-grey050: #f2f4f6;
21+
--brand-colors-grey-grey000: #ffffff;
22+
--brand-colors-grey-grey025: #fafbfc;
23+
/* Blue */
2524
--brand-colors-blue-blue100: #a7d9fe;
2625
--brand-colors-blue-blue200: #75c4fd;
2726
--brand-colors-blue-blue300: #43aefc;
@@ -31,43 +30,81 @@
3130
--brand-colors-blue-blue700: #024272;
3231
--brand-colors-blue-blue800: #01253f;
3332
--brand-colors-blue-blue900: #00080d;
34-
--brand-colors-orange-orange000: #fef5ef;
35-
--brand-colors-orange-orange100: #fde2cf;
36-
--brand-colors-orange-orange200: #fbc49d;
37-
--brand-colors-orange-orange300: #faa66c;
38-
--brand-colors-orange-orange400: #f8883b;
39-
--brand-colors-orange-orange500: #f66a0a;
40-
--brand-colors-orange-orange600: #bf5208;
41-
--brand-colors-orange-orange700: #954005;
42-
--brand-colors-orange-orange800: #632b04;
43-
--brand-colors-orange-orange900: #321602;
44-
--brand-colors-green-green000: #f3fcf5;
45-
--brand-colors-green-green100: #d6ffdf;
46-
--brand-colors-green-green200: #afecbd;
47-
--brand-colors-green-green300: #86e29b;
48-
--brand-colors-green-green400: #5dd879;
49-
--brand-colors-green-green500: #28a745;
50-
--brand-colors-green-green600: #1c8234;
33+
--brand-colors-blue-blue050: #eaf6ff;
34+
--brand-colors-blue-blue025: #eaf6ff;
35+
/* Green */
36+
--brand-colors-green-green100: #afecbd;
37+
--brand-colors-green-green200: #5dd879;
38+
--brand-colors-green-green300: #28a745;
39+
--brand-colors-green-green400: #28a745;
40+
--brand-colors-green-green500: #1c8234;
41+
--brand-colors-green-green600: #145523;
5142
--brand-colors-green-green700: #145523;
5243
--brand-colors-green-green800: #0a2c12;
5344
--brand-colors-green-green900: #041007;
54-
--brand-colors-red-red000: #fcf2f3;
45+
--brand-colors-green-green050: #d6ffdf;
46+
--brand-colors-green-green025: #f3fcf5;
47+
/* Red */
5548
--brand-colors-red-red100: #f7d5d8;
5649
--brand-colors-red-red200: #f1b9be;
5750
--brand-colors-red-red300: #e88f97;
5851
--brand-colors-red-red400: #e06470;
5952
--brand-colors-red-red500: #d73847;
60-
--brand-colors-red-red600: #b92534;
61-
--brand-colors-red-red700: #8e1d28;
62-
--brand-colors-red-red800: #64141c;
53+
--brand-colors-red-red600: #8e1d28;
54+
--brand-colors-red-red700: #64141c;
55+
--brand-colors-red-red800: #3a0c10;
6356
--brand-colors-red-red900: #3a0c10;
57+
--brand-colors-red-red050: #fcf2f3;
58+
--brand-colors-red-red025: #fcf2f3;
59+
/* Yellow */
60+
--brand-colors-yellow-yellow100: #ffdf70;
61+
--brand-colors-yellow-yellow200: #ffc70a;
62+
--brand-colors-yellow-yellow300: #f8883b;
63+
--brand-colors-yellow-yellow400: #f66a0a;
64+
--brand-colors-yellow-yellow500: #bf5208;
65+
--brand-colors-yellow-yellow600: #954005;
66+
--brand-colors-yellow-yellow700: #632b04;
67+
--brand-colors-yellow-yellow800: #321602;
68+
--brand-colors-yellow-yellow900: #321602;
69+
--brand-colors-yellow-yellow050: #fff2c5;
70+
--brand-colors-yellow-yellow025: #fefcde;
71+
/* Orange */
72+
--brand-colors-orange-orange100: #fbc49d;
73+
--brand-colors-orange-orange200: #faa66c;
74+
--brand-colors-orange-orange300: #f8883b;
75+
--brand-colors-orange-orange400: #f66a0a;
76+
--brand-colors-orange-orange500: #bf5208;
77+
--brand-colors-orange-orange600: #954005;
78+
--brand-colors-orange-orange700: #632b04;
79+
--brand-colors-orange-orange800: #321602;
80+
--brand-colors-orange-orange900: #321602;
81+
--brand-colors-orange-orange050: #fde2cf;
82+
--brand-colors-orange-orange025: #fef5ef;
83+
/* Purple */
84+
--brand-colors-purple-purple100: #efd2ff;
85+
--brand-colors-purple-purple200: #cfb5f0;
86+
--brand-colors-purple-purple300: #d27dff;
87+
--brand-colors-purple-purple400: #b864f5;
6488
--brand-colors-purple-purple500: #8b45b6;
65-
--brand-colors-violet-violet300: #cfb5f0;
66-
--brand-colors-yellow-yellow000: #fffdf8;
67-
--brand-colors-yellow-yellow100: #fefcde;
68-
--brand-colors-yellow-yellow200: #fff2c5;
69-
--brand-colors-yellow-yellow300: #ffeaa3;
70-
--brand-colors-yellow-yellow400: #ffdf70;
71-
--brand-colors-yellow-yellow500: #ffd33d;
72-
--brand-colors-yellow-yellow600: #ffc70a;
89+
--brand-colors-purple-purple600: #6c2ab2;
90+
--brand-colors-purple-purple700: #4c1178;
91+
--brand-colors-purple-purple800: #32054d;
92+
--brand-colors-purple-purple900: #280a00;
93+
--brand-colors-purple-purple050: #fbf2ff;
94+
--brand-colors-purple-purple025: #fcf6ff;
95+
/* Lime */
96+
--brand-colors-lime-lime100: #b8ef4a;
97+
--brand-colors-lime-lime200: #95ca45;
98+
--brand-colors-lime-lime300: #7ab040;
99+
--brand-colors-lime-lime400: #64993d;
100+
--brand-colors-lime-lime500: #457a39;
101+
--brand-colors-lime-lime600: #275b35;
102+
--brand-colors-lime-lime700: #093a31;
103+
--brand-colors-lime-lime800: #022321;
104+
--brand-colors-lime-lime900: #011515;
105+
--brand-colors-lime-lime025: #effed9;
106+
--brand-colors-lime-lime050: #e3febd;
107+
/* White and Black */
108+
--brand-colors-white: #ffffff;
109+
--brand-colors-black: #000000;
73110
}

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

Lines changed: 83 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -2,64 +2,102 @@
22
* Dark Theme Colors
33
*/
44
[data-theme='dark'] {
5+
/* For default neutral backgrounds */
56
--color-background-default: var(--brand-colors-grey-grey800);
6-
--color-background-default-hover: #282b2e;
7-
--color-background-default-pressed: #36383b;
7+
/* For secondary neutral backgrounds. */
88
--color-background-alternative: var(--brand-colors-grey-grey900);
9-
--color-background-alternative-hover: #191b1d;
10-
--color-background-alternative-pressed: #27292a;
11-
--color-background-hover: #ffffff05;
9+
/* For "hover" states that use background-default. */
10+
--color-background-default-hover: #313235;
11+
/* For "pressed" states that use background-alternative. */
12+
--color-background-default-pressed: #3f4145;
13+
/* For "hover" states that use background-alternative. */
14+
--color-background-alternative-hover: #1f2123;
15+
/* For "pressed" states that use background-alternative. */
16+
--color-background-alternative-pressed: #2e3033;
17+
/* For "hover" state that use no background fill. */
18+
--color-background-hover: #ffffff0a;
19+
/* For "pressed" state that use no background fill. */
1220
--color-background-pressed: #ffffff14;
13-
--color-text-default: var(--brand-colors-white-white000);
14-
--color-text-alternative: var(--brand-colors-grey-grey100);
21+
/* For default neutral text. */
22+
--color-text-default: var(--brand-colors-grey-grey000);
23+
/* For softer contrast neutral text */
24+
--color-text-alternative: var(--brand-colors-grey-grey200);
25+
/* For the softest contrast neutral text (not accessible) */
1526
--color-text-muted: var(--brand-colors-grey-grey400);
16-
--color-icon-default: var(--brand-colors-white-white000);
27+
/* For default neutral icons */
28+
--color-icon-default: var(--brand-colors-grey-grey000);
29+
/* For softer neutral icons */
1730
--color-icon-alternative: var(--brand-colors-grey-grey200);
31+
/* For the weakest contrast neutral icons (not accessible) */
1832
--color-icon-muted: var(--brand-colors-grey-grey400);
33+
/* For soft contrast neutral border */
1934
--color-border-default: var(--brand-colors-grey-grey400);
20-
--color-border-muted: var(--brand-colors-grey-grey700);
35+
/* For the weakest contrast neutral border */
36+
--color-border-muted: #848c9629;
37+
/* For the default shade of screen */
2138
--color-overlay-default: #00000099;
39+
/* For a stronger shade of screen */
2240
--color-overlay-alternative: #000000cc;
23-
--color-shadow-default: #00000080;
24-
--color-overlay-inverse: var(--brand-colors-white-white010);
25-
--color-primary-default: var(--brand-colors-blue-blue400);
26-
--color-primary-default-hover: #0092fa;
27-
--color-primary-default-pressed: #54b6fc;
28-
--color-primary-alternative: var(--brand-colors-blue-blue300);
29-
--color-primary-muted: #1098fc26;
41+
/* For elements used on top of overlay/alternative. Used for text, icon or border */
42+
--color-overlay-inverse: var(--brand-colors-grey-grey000);
43+
/* For interactive, active, and selected semantics. Used for text, background, icon or border */
44+
--color-primary-default: var(--brand-colors-blue-blue300);
45+
/* For the stronger contrast primary semantic elements. */
46+
--color-primary-alternative: var(--brand-colors-blue-blue200);
47+
/* For the weakest contrast primary semantic backgrounds. */
48+
--color-primary-muted: #43aefc26;
49+
/* For elements used on top of primary/default. Used for text, icon or border */
3050
--color-primary-inverse: var(--brand-colors-grey-grey900);
31-
--color-primary-disabled: #1098fc80;
32-
--color-primary-shadow: #0376c933;
33-
--color-secondary-default: var(--brand-colors-orange-orange400);
34-
--color-secondary-alternative: var(--brand-colors-orange-orange300);
35-
--color-secondary-muted: #f8883b26;
36-
--color-secondary-inverse: var(--brand-colors-grey-grey900);
37-
--color-secondary-disabled: #f8883b80;
38-
--color-error-default: #ff5263;
39-
--color-error-default-hover: #ff4d58;
40-
--color-error-default-pressed: #f9868e;
41-
--color-error-alternative: var(--brand-colors-red-red300);
42-
--color-error-muted: #ff526326;
51+
/* For the "hover" state of primary-default elements */
52+
--color-primary-default-hover: #26a2fc;
53+
/* For the "pressed" state of primary-default elements */
54+
--color-primary-default-pressed: #3baafd;
55+
/* For the critical alert semantic elements. Used for text, background, icon or border */
56+
--color-error-default: var(--brand-colors-red-red300);
57+
/* For the stronger contrast error semantic elements. */
58+
--color-error-alternative: var(--brand-colors-red-red200);
59+
/* For the weakest contrast critical alert semantic backgrounds. */
60+
--color-error-muted: #e88f9726;
61+
/* For elements used on top of error/default. Used for text, icon or border */
4362
--color-error-inverse: var(--brand-colors-grey-grey900);
44-
--color-error-disabled: #d7384780;
45-
--color-error-shadow: #ff526366;
46-
--color-warning-default: var(--brand-colors-yellow-yellow500);
47-
--color-warning-default-hover: #ffc60a;
48-
--color-warning-default-pressed: #ffeaa3d1;
49-
--color-warning-alternative: var(--brand-colors-yellow-yellow400);
50-
--color-warning-muted: #ffd33d26;
63+
/* For the "hover" state of error-default elements. */
64+
--color-error-default-hover: #e47782;
65+
/* For the "pressed" state of error-default elements. */
66+
--color-error-default-pressed: #e78891;
67+
/* For the caution alert semantic elements. Used for text, background, icon or border */
68+
--color-warning-default: var(--brand-colors-yellow-yellow100);
69+
/* For the weakest contrast caution alert semantic backgrounds. */
70+
--color-warning-muted: #ffdf7026;
71+
/* For elements used on top of warning/default. Used for text, icon or border */
5172
--color-warning-inverse: var(--brand-colors-grey-grey900);
52-
--color-warning-disabled: #ffd33d80;
53-
--color-success-default: var(--brand-colors-green-green500);
54-
--color-success-default-hover: #05b82f;
55-
--color-success-default-pressed: #6aec88;
56-
--color-success-alternative: var(--brand-colors-green-green400);
73+
/* For the "hover" state of warning-default elements */
74+
--color-warning-default-hover: #ffe485;
75+
/* For the "pressed" state of warning-default elements */
76+
--color-warning-default-pressed: #ffe899;
77+
/* For the positive semantic elements. Used for text, background, icon or border */
78+
--color-success-default: var(--brand-colors-green-green300);
79+
/* For the weakest contrast positive semantic backgrounds. */
5780
--color-success-muted: #28a74526;
81+
/* For elements used on top of success/default. Used for text, icon or border */
5882
--color-success-inverse: var(--brand-colors-grey-grey900);
59-
--color-success-disabled: #28a74580;
60-
--color-info-default: var(--brand-colors-blue-blue400);
61-
--color-info-alternative: var(--brand-colors-blue-blue300);
62-
--color-info-muted: #1098fc26;
83+
/* For the "hover" state of success-default elements */
84+
--color-success-default-hover: #2cb94c;
85+
/* For the "pressed" state of success-default elements */
86+
--color-success-default-pressed: #30ca53;
87+
/* For informational read-only elements. Used for text, background, icon or border */
88+
--color-info-default: var(--brand-colors-blue-blue300);
89+
/* For the weakest contrast informational semantic backgrounds. */
90+
--color-info-muted: #43aefc26;
91+
/* For elements used on top of info/default. Used for text, icon or border */
6392
--color-info-inverse: var(--brand-colors-grey-grey900);
64-
--color-info-disabled: #0376c980;
93+
/* For Flask primary accent color. */
94+
--color-flask-default: var(--brand-colors-purple-purple300);
95+
/* For elements used on top of flask/default. Used for text, icon or border */
96+
--color-flask-inverse: var(--brand-colors-grey-grey900);
97+
/* For neutral drop shadow color. */
98+
--color-shadow-default: #00000066;
99+
/* For primary drop shadow color. */
100+
--color-shadow-primary: #43aefc33;
101+
/* For critical/danger drop shadow color. */
102+
--color-shadow-error: #ff758466;
65103
}

0 commit comments

Comments
 (0)