chore: updated css variables based on updated json

MIGRATION.md

@@ -2,6 +2,160 @@
 
 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 additions, modifications, and removals. To upgrade to version 4, ensure that the following tokens are not present in your codebase:
+
+### Brand Colors
+
+- grey-030 modified to grey-025
+- grey-040 modified to grey-050
+- grey-750 removed
+- grey-1000 added
+- blue-000 modified to blue-025
+- blue-050 added
+- green-000 modified to green-025
+- green-050 added
+- red-000 modified to red-025
+- red-050 added
+- yellow-000 modified to yellow-025
+- yellow-050 added
+- yellow-700 added
+- yellow-800 added
+- yellow-900 added
+- orange-000 modified to orange-025
+- orange-050 added
+- purple-025 added
+- purple-050 added
+- purple-100 added
+- purple-200 added
+- purple-300 added
+- purple-400 added
+- purple-600 added
+- purple-700 added
+- purple-800 added
+- purple-900 added
+- violet-300 removed
+- lime-025 added
+- lime-050 added
+- lime-100 added
+- lime-200 added
+- lime-300 added
+- lime-400 added
+- lime-500 added
+- lime-600 added
+- lime-700 added
+- lime-800 added
+- lime-900 added
+- white-000 modified to white
+- white-010 removed
+- black-000 modified to black
+
+#### 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-grey-grey1000 added
+--brand-colors-blue-blue000 modified to --brand-colors-blue-blue025
+--brand-colors-blue-blue050 added
+--brand-colors-green-green000 modified to --brand-colors-green-green025
+--brand-colors-green-green050 added
+--brand-colors-red-red000 modified to --brand-colors-red-red025
+--brand-colors-red-red050 added
+--brand-colors-yellow-yellow000 modified to --brand-colors-yellow-yellow025
+--brand-colors-yellow-yellow050 added
+--brand-colors-yellow-yellow700 added
+--brand-colors-yellow-yellow800 added
+--brand-colors-yellow-yellow900 added
+--brand-colors-orange-orange000 modified to --brand-colors-orange-orange025
+--brand-colors-orange-orange050 added
+--brand-colors-purple-purple025 added
+--brand-colors-purple-purple050 added
+--brand-colors-purple-purple100 added
+--brand-colors-purple-purple200 added
+--brand-colors-purple-purple300 added
+--brand-colors-purple-purple400 added
+--brand-colors-purple-purple600 added
+--brand-colors-purple-purple700 added
+--brand-colors-purple-purple800 added
+--brand-colors-purple-purple900 added
+--brand-colors-violet-violet300 removed
+--brand-colors-lime-lime025 added
+--brand-colors-lime-lime050 added
+--brand-colors-lime-lime100 added
+--brand-colors-lime-lime200 added
+--brand-colors-lime-lime300 added
+--brand-colors-lime-lime400 added
+--brand-colors-lime-lime500 added
+--brand-colors-lime-lime600 added
+--brand-colors-lime-lime700 added
+--brand-colors-lime-lime800 added
+--brand-colors-lime-lime900 added
+--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
+
+- overlay-inverse removed
+- primary-shadow modified to shadow-primary
+- primary-disabled removed
+- secondary-default removed
+- secondary-alternative removed
+- secondary-muted removed
+- secondary-inverse removed
+- secondary-disabled removed
+- error-shadow modified to shadow-primary
+- error-disabled removed
+- warning-alternative removed
+- warning-disabled removed
+- success-alternative removed
+- success-disabled removed
+- info-alternative removed
+- info-disabled removed
+- network-goerli-default removed
+- network-goerli-inverse removed
+- network-localhost-default removed
+- network-localhost-inverse removed
+- network-sepolia-default removed
+- network-sepolia-inverse removed
+- component-button-primary-shadow removed
+- component-button-danger-shadow removed
+
+#### CSS Tokens
+
+```
+--color-overlay-inverse removed
+--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)
 
 ## From version 2.1.1 to 3.0.0

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,92 @@
   --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-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;
+  /* Deprecated - To be removed */
+  --brand-colors-grey-grey030: #fafbfc;
+  --brand-colors-grey-grey040: #f2f4f6;
+  --brand-colors-grey-grey750: #2e3339;
+  --brand-colors-blue-blue000: #eaf6ff;
+  --brand-colors-green-green000: #f3fcf5;
+  --brand-colors-red-red000: #fcf2f3;
   --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-orange-orange000: #fef5ef;
+  --brand-colors-violet-violet300: #cfb5f0;
+  --brand-colors-white-white010: #fcfcfc;
 }