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 <[email protected]>
MetaMask · May 30, 2024 · 4e66c65 · 4e66c65
1 parent 4d78b11
commit 4e66c65
Show file tree

Hide file tree

Showing 4 changed files with 318 additions and 144 deletions.
diff --git a/MIGRATION.md b/MIGRATION.md
@@ -3,6 +3,82 @@
 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-211-to-300)
+- [From version 3.0.0 to 4.0.0](#from-version-300-to-400)
+
+## 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
 

diff --git a/src/css/brand-colors.css b/src/css/brand-colors.css
@@ -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;
@@ -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;
 }
diff --git a/src/css/dark-theme-colors.css b/src/css/dark-theme-colors.css
@@ -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;
 }