From 39cc2ae2a675063c5b067f46fa8f03029c27a848 Mon Sep 17 00:00:00 2001
From: Brian Nguyen <brianacnguyen@gmail.com>
Date: Wed, 29 May 2024 15:33:03 -0700
Subject: [PATCH 01/13] chore: updated css variables based on updated json

---
 MIGRATION.md                   |  66 +++++++++++++
 src/css/brand-colors.css       | 165 ++++++++++++++++++++-------------
 src/css/dark-theme-colors.css  | 148 ++++++++++++++++++-----------
 src/css/light-theme-colors.css | 161 ++++++++++++++++++--------------
 4 files changed, 350 insertions(+), 190 deletions(-)

diff --git a/MIGRATION.md b/MIGRATION.md
index e54b3ad1..2a9b44e3 100644
--- a/MIGRATION.md
+++ b/MIGRATION.md
@@ -2,6 +2,72 @@
 
 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:
+
+### Removed
+
+#### CSS
+
+```
+--brand-colors-grey-grey030
+--brand-colors-grey-grey040
+--brand-colors-grey-grey750
+--brand-colors-blue-blue000
+--brand-colors-green-green000
+--brand-colors-red-red000
+--brand-colors-yellow-yellow000
+--brand-colors-orange-orange000
+--brand-colors-violet
+--brand-colors-white-white010
+--color-overlay-inverse
+--color-primary-shadow
+--color-primary-disabled
+--color-secondary
+--color-error-shadow
+--color-error-disabled
+--color-warning-alternative
+--color-warning-disabled
+--color-success-alternative
+--color-success-disabled
+--color-info-alternative
+--color-info-disabled
+--color-network-
+```
+
+### Changed
+
+#### CSS
+
+```
+--brand-colors-white-white000 to --brand-colors-white
+--brand-colors-black-black000 to --brand-colors-black
+```
+
+### Themed Colors
+
+- overlay-inverse removed
+- primary-shadow removed
+- primary-disabled removed
+- secondary colors removed
+- error-shadow removed
+- error-disabled removed
+- warning-alternative removed
+- warning-disabled removed
+- success-alternative removed
+- success-disabled removed
+- info-alternative removed
+- info-disabled removed
+- network colors removed
+- shadow-primary added
+- shadow-error added
+- button colors removed
+
 - [From version 2.1.1 to 3.0.0](#from-version-211-to-300)
 
 ## From version 2.1.1 to 3.0.0
diff --git a/src/css/brand-colors.css b/src/css/brand-colors.css
index 98f54cea..2a7c0369 100644
--- a/src/css/brand-colors.css
+++ b/src/css/brand-colors.css
@@ -6,68 +6,105 @@
  * 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;
-  --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-blue-blue100: #a7d9fe;
-  --brand-colors-blue-blue200: #75c4fd;
-  --brand-colors-blue-blue300: #43aefc;
-  --brand-colors-blue-blue400: #1098fc;
-  --brand-colors-blue-blue500: #0376c9;
-  --brand-colors-blue-blue600: #0260a4;
-  --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-green-green700: #145523;
-  --brand-colors-green-green800: #0a2c12;
-  --brand-colors-green-green900: #041007;
-  --brand-colors-red-red000: #fcf2f3;
-  --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-red900: #3a0c10;
-  --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;
+  /* Grey */
+  --brand-colors-grey-100: #d6d9dc;
+  --brand-colors-grey-200: #bbc0c5;
+  --brand-colors-grey-300: #9fa6ae;
+  --brand-colors-grey-400: #848c96;
+  --brand-colors-grey-500: #6a737d;
+  --brand-colors-grey-600: #535a61;
+  --brand-colors-grey-700: #3b4046;
+  --brand-colors-grey-800: #24272a;
+  --brand-colors-grey-900: #141618;
+  --brand-colors-grey-1000: #000000;
+  --brand-colors-grey-050: #f2f4f6;
+  --brand-colors-grey-000: #ffffff;
+  --brand-colors-grey-025: #fafbfc;
+  /* Blue */
+  --brand-colors-blue-100: #a7d9fe;
+  --brand-colors-blue-200: #75c4fd;
+  --brand-colors-blue-300: #43aefc;
+  --brand-colors-blue-400: #1098fc;
+  --brand-colors-blue-500: #0376c9;
+  --brand-colors-blue-600: #0260a4;
+  --brand-colors-blue-700: #024272;
+  --brand-colors-blue-800: #01253f;
+  --brand-colors-blue-900: #00080d;
+  --brand-colors-blue-050: #eaf6ff;
+  --brand-colors-blue-025: #eaf6ff;
+  /* Green */
+  --brand-colors-green-100: #afecbd;
+  --brand-colors-green-200: #5dd879;
+  --brand-colors-green-300: #28a745;
+  --brand-colors-green-400: #28a745;
+  --brand-colors-green-500: #1c8234;
+  --brand-colors-green-600: #145523;
+  --brand-colors-green-700: #145523;
+  --brand-colors-green-800: #0a2c12;
+  --brand-colors-green-900: #041007;
+  --brand-colors-green-050: #d6ffdf;
+  --brand-colors-green-025: #f3fcf5;
+  /* Red */
+  --brand-colors-red-100: #f7d5d8;
+  --brand-colors-red-200: #f1b9be;
+  --brand-colors-red-300: #e88f97;
+  --brand-colors-red-400: #e06470;
+  --brand-colors-red-500: #d73847;
+  --brand-colors-red-600: #8e1d28;
+  --brand-colors-red-700: #64141c;
+  --brand-colors-red-800: #3a0c10;
+  --brand-colors-red-900: #3a0c10;
+  --brand-colors-red-050: #fcf2f3;
+  --brand-colors-red-025: #fcf2f3;
+  /* Yellow */
+  --brand-colors-yellow-100: #ffdf70;
+  --brand-colors-yellow-200: #ffc70a;
+  --brand-colors-yellow-300: #f8883b;
+  --brand-colors-yellow-400: #f66a0a;
+  --brand-colors-yellow-500: #bf5208;
+  --brand-colors-yellow-600: #954005;
+  --brand-colors-yellow-700: #632b04;
+  --brand-colors-yellow-800: #321602;
+  --brand-colors-yellow-900: #321602;
+  --brand-colors-yellow-050: #fff2c5;
+  --brand-colors-yellow-025: #fefcde;
+  /* Orange */
+  --brand-colors-orange-100: #fbc49d;
+  --brand-colors-orange-200: #faa66c;
+  --brand-colors-orange-300: #f8883b;
+  --brand-colors-orange-400: #f66a0a;
+  --brand-colors-orange-500: #bf5208;
+  --brand-colors-orange-600: #954005;
+  --brand-colors-orange-700: #632b04;
+  --brand-colors-orange-800: #321602;
+  --brand-colors-orange-900: #321602;
+  --brand-colors-orange-050: #fde2cf;
+  --brand-colors-orange-025: #fef5ef;
+  /* Purple */
+  --brand-colors-purple-100: #efd2ff;
+  --brand-colors-purple-200: #cfb5f0;
+  --brand-colors-purple-300: #d27dff;
+  --brand-colors-purple-400: #b864f5;
+  --brand-colors-purple-500: #8b45b6;
+  --brand-colors-purple-600: #6c2ab2;
+  --brand-colors-purple-700: #4c1178;
+  --brand-colors-purple-800: #32054d;
+  --brand-colors-purple-900: #280a00;
+  --brand-colors-purple-050: #fbf2ff;
+  --brand-colors-purple-025: #fcf6ff;
+  /* Lime */
+  --brand-colors-lime-100: #b8ef4a;
+  --brand-colors-lime-200: #95ca45;
+  --brand-colors-lime-300: #7ab040;
+  --brand-colors-lime-400: #64993d;
+  --brand-colors-lime-500: #457a39;
+  --brand-colors-lime-600: #275b35;
+  --brand-colors-lime-700: #093a31;
+  --brand-colors-lime-800: #022321;
+  --brand-colors-lime-900: #011515;
+  --brand-colors-lime-025: #effed9;
+  --brand-colors-lime-050: #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
index f5e81cb2..8dea4304 100644
--- a/src/css/dark-theme-colors.css
+++ b/src/css/dark-theme-colors.css
@@ -2,64 +2,100 @@
  * Dark Theme Colors
 */
 [data-theme='dark'] {
-  --color-background-default: var(--brand-colors-grey-grey800);
-  --color-background-default-hover: #282b2e;
-  --color-background-default-pressed: #36383b;
-  --color-background-alternative: var(--brand-colors-grey-grey900);
-  --color-background-alternative-hover: #191b1d;
-  --color-background-alternative-pressed: #27292a;
-  --color-background-hover: #ffffff05;
+  /* For default neutral backgrounds */
+  --color-background-default: var(--brand-colors-grey-800);
+  /* For secondary neutral backgrounds. */
+  --color-background-alternative: var(--brand-colors-grey-900);
+  /* 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);
-  --color-text-muted: var(--brand-colors-grey-grey400);
-  --color-icon-default: var(--brand-colors-white-white000);
-  --color-icon-alternative: var(--brand-colors-grey-grey200);
-  --color-icon-muted: var(--brand-colors-grey-grey400);
-  --color-border-default: var(--brand-colors-grey-grey400);
-  --color-border-muted: var(--brand-colors-grey-grey700);
+  /* For default neutral text. */
+  --color-text-default: var(--brand-colors-grey-000);
+  /* For softer contrast neutral text */
+  --color-text-alternative: var(--brand-colors-grey-200);
+  /* For the softest contrast neutral text (not accessible) */
+  --color-text-muted: var(--brand-colors-grey-400);
+  /* For default neutral icons */
+  --color-icon-default: var(--brand-colors-grey-000);
+  /* For softer neutral icons */
+  --color-icon-alternative: var(--brand-colors-grey-200);
+  /* For the weakest contrast neutral icons (not accessible) */
+  --color-icon-muted: var(--brand-colors-grey-400);
+  /* For soft contrast neutral border */
+  --color-border-default: var(--brand-colors-grey-400);
+  /* 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;
-  --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;
-  --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;
-  --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 interactive, active, and selected semantics. Used for text, background, icon or border */
+  --color-primary-default: var(--brand-colors-blue-300);
+  /* For the stronger contrast primary semantic elements. */
+  --color-primary-alternative: var(--brand-colors-blue-200);
+  /* 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-900);
+  /* 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-300);
+  /* For the stronger contrast error semantic elements. */
+  --color-error-alternative: var(--brand-colors-red-200);
+  /* 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-900);
+  /* 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-100);
+  /* 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-900);
+  /* 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-300);
+  /* For the weakest contrast positive semantic backgrounds. */
   --color-success-muted: #28a74526;
-  --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;
-  --color-info-inverse: var(--brand-colors-grey-grey900);
-  --color-info-disabled: #0376c980;
+  /* For elements used on top of success/default. Used for text, icon or border */
+  --color-success-inverse: var(--brand-colors-grey-900);
+  /* 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-300);
+  /* 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-900);
+  /* For Flask primary accent color. */
+  --color-flask-default: var(--brand-colors-purple-300);
+  /* For elements used on top of flask/default. Used for text, icon or border */
+  --color-flask-inverse: var(--brand-colors-grey-900);
+  /* 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;
 }
diff --git a/src/css/light-theme-colors.css b/src/css/light-theme-colors.css
index c4ce7de1..4424d419 100644
--- a/src/css/light-theme-colors.css
+++ b/src/css/light-theme-colors.css
@@ -3,79 +3,100 @@
  */
 :root,
 [data-theme='light'] {
-  --color-background-default: var(--brand-colors-white-white000);
-  --color-background-default-hover: #fafafa;
+  /* For default neutral backgrounds */
+  --color-background-default: var(--brand-colors-grey-000);
+  /* For secondary neutral backgrounds. */
+  --color-background-alternative: var(--brand-colors-grey-050);
+  /* For "hover" states that use background-default. */
+  --color-background-default-hover: #f5f5f5;
+  /* For "pressed" states that use background-alternative. */
   --color-background-default-pressed: #ebebeb;
-  --color-background-alternative: var(--brand-colors-grey-grey040);
-  --color-background-alternative-hover: #edeff1;
-  --color-background-alternative-pressed: #dfe0e2;
-  --color-background-hover: #00000005;
+  /* For "hover" states that use background-alternative. */
+  --color-background-alternative-hover: #e7ebee;
+  /* For "pressed" states that use background-alternative. */
+  --color-background-alternative-pressed: #dbe0e6;
+  /* For "hover" state that use no background fill. */
+  --color-background-hover: #0000000a;
+  /* For "pressed" state that use no background fill. */
   --color-background-pressed: #00000014;
-  --color-text-default: var(--brand-colors-grey-grey800);
-  --color-text-alternative: var(--brand-colors-grey-grey600);
-  --color-text-muted: var(--brand-colors-grey-grey200);
-  --color-icon-default: var(--brand-colors-grey-grey800);
-  --color-icon-alternative: var(--brand-colors-grey-grey500);
-  --color-icon-muted: var(--brand-colors-grey-grey200);
-  --color-border-default: var(--brand-colors-grey-grey200);
-  --color-border-muted: var(--brand-colors-grey-grey100);
+  /* For default neutral text. */
+  --color-text-default: var(--brand-colors-grey-900);
+  /* For softer contrast neutral text */
+  --color-text-alternative: var(--brand-colors-grey-500);
+  /* For the softest contrast neutral text (not accessible) */
+  --color-text-muted: var(--brand-colors-grey-300);
+  /* For default neutral icons */
+  --color-icon-default: var(--brand-colors-grey-900);
+  /* For softer neutral icons */
+  --color-icon-alternative: var(--brand-colors-grey-500);
+  /* For the weakest contrast neutral icons (not accessible) */
+  --color-icon-muted: var(--brand-colors-grey-300);
+  /* For soft contrast neutral border */
+  --color-border-default: var(--brand-colors-grey-200);
+  /* For the weakest  contrast neutral border */
+  --color-border-muted: #bbc0c566;
+  /* For the default shade of screen */
   --color-overlay-default: #00000099;
+  /* For a stronger shade of screen */
   --color-overlay-alternative: #000000cc;
-  --color-overlay-inverse: var(--brand-colors-white-white010);
+  /* For interactive, active, and selected semantics. Used for text, background, icon or border */
+  --color-primary-default: var(--brand-colors-blue-500);
+  /* For the stronger contrast primary semantic elements. */
+  --color-primary-alternative: var(--brand-colors-blue-600);
+  /* For the weakest contrast primary semantic backgrounds. */
+  --color-primary-muted: #0376c91a;
+  /* For elements used on top of primary/default. Used for text, icon or border */
+  --color-primary-inverse: var(--brand-colors-grey-000);
+  /* For the "hover" state of primary-default elements */
+  --color-primary-default-hover: #036ab5;
+  /* For the "pressed" state of primary-default elements */
+  --color-primary-default-pressed: #025ea1;
+  /* For the critical alert semantic elements. Used for text, background, icon or border */
+  --color-error-default: var(--brand-colors-red-500);
+  /* For the stronger contrast error semantic elements. */
+  --color-error-alternative: var(--brand-colors-red-600);
+  /* For the weakest contrast critical alert semantic backgrounds. */
+  --color-error-muted: #d738471a;
+  /* For elements used on top of error/default. Used for text, icon or border */
+  --color-error-inverse: var(--brand-colors-grey-000);
+  /* For the "hover" state of error-default elements. */
+  --color-error-default-hover: #d02a3a;
+  /* For the "pressed" state of error-default elements. */
+  --color-error-default-pressed: #bf2635;
+  /* For the caution alert semantic elements. Used for text, background, icon or border */
+  --color-warning-default: var(--brand-colors-yellow-500);
+  /* For the weakest contrast caution alert semantic backgrounds. */
+  --color-warning-muted: #bf52081a;
+  /* For elements used on top of warning/default. Used for text, icon or border */
+  --color-warning-inverse: var(--brand-colors-grey-000);
+  /* For the "hover" state of warning-default elements */
+  --color-warning-default-hover: #ac4a07;
+  /* For the "pressed" state of warning-default elements */
+  --color-warning-default-pressed: #984106;
+  /* For the positive semantic elements. Used for text, background, icon or border */
+  --color-success-default: var(--brand-colors-green-500);
+  /* For the weakest contrast positive semantic backgrounds. */
+  --color-success-muted: #1c82341a;
+  /* For elements used on top of success/default. Used for text, icon or border */
+  --color-success-inverse: var(--brand-colors-grey-000);
+  /* For the "hover" state of success-default elements */
+  --color-success-default-hover: #18712d;
+  /* For the "pressed" state of success-default elements */
+  --color-success-default-pressed: #156127;
+  /* For informational read-only elements. Used for text, background, icon or border */
+  --color-info-default: var(--brand-colors-blue-500);
+  /* For the weakest contrast informational semantic backgrounds. */
+  --color-info-muted: #0376c91a;
+  /* For elements used on top of info/default. Used for text, icon or border */
+  --color-info-inverse: var(--brand-colors-grey-000);
+  /* For Flask primary accent color. */
+  --color-flask-default: var(--brand-colors-purple-500);
+  /* For elements used on top of flask/default. Used for text, icon or border */
+  --color-flask-inverse: var(--brand-colors-grey-000);
+  /* For neutral drop shadow color. */
   --color-shadow-default: #0000001a;
-  --color-primary-default: var(--brand-colors-blue-blue500);
-  --color-primary-default-hover: #0379ce;
-  --color-primary-default-pressed: #036db9;
-  --color-primary-alternative: var(--brand-colors-blue-blue600);
-  --color-primary-muted: #0376c919;
-  --color-primary-inverse: var(--brand-colors-white-white000);
-  --color-primary-disabled: #0376c980;
-  --color-primary-shadow: #0376c933;
-  --color-secondary-default: var(--brand-colors-orange-orange500);
-  --color-secondary-alternative: var(--brand-colors-orange-orange600);
-  --color-secondary-muted: #f66a0a19;
-  --color-secondary-inverse: var(--brand-colors-white-white000);
-  --color-secondary-disabled: #f66a0a80;
-  --color-error-default: var(--brand-colors-red-red500);
-  --color-error-default-hover: #cd4250;
-  --color-error-default-pressed: #c63441;
-  --color-error-alternative: var(--brand-colors-red-red600);
-  --color-error-muted: #d7384719;
-  --color-error-inverse: var(--brand-colors-white-white000);
-  --color-error-disabled: #d7384780;
-  --color-error-shadow: #d7384766;
-  --color-warning-default: var(--brand-colors-orange-orange600);
-  --color-warning-default-hover: #c2540a;
-  --color-warning-default-pressed: #a24507;
-  --color-warning-alternative: var(--brand-colors-yellow-yellow600);
-  --color-warning-muted: #bf520819;
-  --color-warning-inverse: var(--brand-colors-white-white000);
-  --color-warning-disabled: #ffd33d80;
-  --color-success-default: var(--brand-colors-green-green600);
-  --color-success-default-hover: #208838;
-  --color-success-default-pressed: #1b7431;
-  --color-success-alternative: var(--brand-colors-green-green500);
-  --color-success-muted: #1c823419;
-  --color-success-inverse: var(--brand-colors-white-white000);
-  --color-success-disabled: #28a74580;
-  --color-info-default: var(--brand-colors-blue-blue500);
-  --color-info-alternative: var(--brand-colors-blue-blue600);
-  --color-info-muted: #0376c919;
-  --color-info-inverse: var(--brand-colors-white-white000);
-  --color-info-disabled: #0376c980;
-  --color-network-goerli-default: var(--brand-colors-blue-blue400);
-  --color-network-goerli-inverse: var(--brand-colors-white-white010);
-  --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);
-  --color-flask-default: var(--brand-colors-purple-purple500);
-  --color-flask-inverse: var(--brand-colors-white-white010);
-
-  /* Components */
-  /* button */
-  --component-button-primary-shadow: var(--shadow-size-sm)
-    var(--color-primary-shadow);
-  --component-button-danger-shadow: var(--shadow-size-sm)
-    var(--color-error-shadow);
+  /* For primary drop shadow color. */
+  --color-shadow-primary: #0376c933;
+  /* For critical/danger drop shadow color. */
+  --color-shadow-error: #ca354266;
 }

From 2ca877984b2acb4b72fbf877052e730e117809b0 Mon Sep 17 00:00:00 2001
From: Brian Nguyen <brianacnguyen@gmail.com>
Date: Wed, 29 May 2024 15:44:11 -0700
Subject: [PATCH 02/13] refactor: updated css variable namings

---
 src/css/brand-colors.css       | 180 ++++++++++++++++-----------------
 src/css/dark-theme-colors.css  |  46 ++++-----
 src/css/light-theme-colors.css |  46 ++++-----
 3 files changed, 136 insertions(+), 136 deletions(-)

diff --git a/src/css/brand-colors.css b/src/css/brand-colors.css
index 2a7c0369..0884a581 100644
--- a/src/css/brand-colors.css
+++ b/src/css/brand-colors.css
@@ -7,103 +7,103 @@
  */
 :root {
   /* Grey */
-  --brand-colors-grey-100: #d6d9dc;
-  --brand-colors-grey-200: #bbc0c5;
-  --brand-colors-grey-300: #9fa6ae;
-  --brand-colors-grey-400: #848c96;
-  --brand-colors-grey-500: #6a737d;
-  --brand-colors-grey-600: #535a61;
-  --brand-colors-grey-700: #3b4046;
-  --brand-colors-grey-800: #24272a;
-  --brand-colors-grey-900: #141618;
-  --brand-colors-grey-1000: #000000;
-  --brand-colors-grey-050: #f2f4f6;
-  --brand-colors-grey-000: #ffffff;
-  --brand-colors-grey-025: #fafbfc;
+  --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-grey800: #24272a;
+  --brand-colors-grey-grey900: #141618;
+  --brand-colors-grey-grey1000: #000000;
+  --brand-colors-grey-grey050: #f2f4f6;
+  --brand-colors-grey-grey000: #ffffff;
+  --brand-colors-grey-grey025: #fafbfc;
   /* Blue */
-  --brand-colors-blue-100: #a7d9fe;
-  --brand-colors-blue-200: #75c4fd;
-  --brand-colors-blue-300: #43aefc;
-  --brand-colors-blue-400: #1098fc;
-  --brand-colors-blue-500: #0376c9;
-  --brand-colors-blue-600: #0260a4;
-  --brand-colors-blue-700: #024272;
-  --brand-colors-blue-800: #01253f;
-  --brand-colors-blue-900: #00080d;
-  --brand-colors-blue-050: #eaf6ff;
-  --brand-colors-blue-025: #eaf6ff;
+  --brand-colors-blue-blue100: #a7d9fe;
+  --brand-colors-blue-blue200: #75c4fd;
+  --brand-colors-blue-blue300: #43aefc;
+  --brand-colors-blue-blue400: #1098fc;
+  --brand-colors-blue-blue500: #0376c9;
+  --brand-colors-blue-blue600: #0260a4;
+  --brand-colors-blue-blue700: #024272;
+  --brand-colors-blue-blue800: #01253f;
+  --brand-colors-blue-blue900: #00080d;
+  --brand-colors-blue-blue050: #eaf6ff;
+  --brand-colors-blue-blue025: #eaf6ff;
   /* Green */
-  --brand-colors-green-100: #afecbd;
-  --brand-colors-green-200: #5dd879;
-  --brand-colors-green-300: #28a745;
-  --brand-colors-green-400: #28a745;
-  --brand-colors-green-500: #1c8234;
-  --brand-colors-green-600: #145523;
-  --brand-colors-green-700: #145523;
-  --brand-colors-green-800: #0a2c12;
-  --brand-colors-green-900: #041007;
-  --brand-colors-green-050: #d6ffdf;
-  --brand-colors-green-025: #f3fcf5;
+  --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-green-green050: #d6ffdf;
+  --brand-colors-green-green025: #f3fcf5;
   /* Red */
-  --brand-colors-red-100: #f7d5d8;
-  --brand-colors-red-200: #f1b9be;
-  --brand-colors-red-300: #e88f97;
-  --brand-colors-red-400: #e06470;
-  --brand-colors-red-500: #d73847;
-  --brand-colors-red-600: #8e1d28;
-  --brand-colors-red-700: #64141c;
-  --brand-colors-red-800: #3a0c10;
-  --brand-colors-red-900: #3a0c10;
-  --brand-colors-red-050: #fcf2f3;
-  --brand-colors-red-025: #fcf2f3;
+  --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: #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-100: #ffdf70;
-  --brand-colors-yellow-200: #ffc70a;
-  --brand-colors-yellow-300: #f8883b;
-  --brand-colors-yellow-400: #f66a0a;
-  --brand-colors-yellow-500: #bf5208;
-  --brand-colors-yellow-600: #954005;
-  --brand-colors-yellow-700: #632b04;
-  --brand-colors-yellow-800: #321602;
-  --brand-colors-yellow-900: #321602;
-  --brand-colors-yellow-050: #fff2c5;
-  --brand-colors-yellow-025: #fefcde;
+  --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-100: #fbc49d;
-  --brand-colors-orange-200: #faa66c;
-  --brand-colors-orange-300: #f8883b;
-  --brand-colors-orange-400: #f66a0a;
-  --brand-colors-orange-500: #bf5208;
-  --brand-colors-orange-600: #954005;
-  --brand-colors-orange-700: #632b04;
-  --brand-colors-orange-800: #321602;
-  --brand-colors-orange-900: #321602;
-  --brand-colors-orange-050: #fde2cf;
-  --brand-colors-orange-025: #fef5ef;
+  --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-100: #efd2ff;
-  --brand-colors-purple-200: #cfb5f0;
-  --brand-colors-purple-300: #d27dff;
-  --brand-colors-purple-400: #b864f5;
-  --brand-colors-purple-500: #8b45b6;
-  --brand-colors-purple-600: #6c2ab2;
-  --brand-colors-purple-700: #4c1178;
-  --brand-colors-purple-800: #32054d;
-  --brand-colors-purple-900: #280a00;
-  --brand-colors-purple-050: #fbf2ff;
-  --brand-colors-purple-025: #fcf6ff;
+  --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-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-100: #b8ef4a;
-  --brand-colors-lime-200: #95ca45;
-  --brand-colors-lime-300: #7ab040;
-  --brand-colors-lime-400: #64993d;
-  --brand-colors-lime-500: #457a39;
-  --brand-colors-lime-600: #275b35;
-  --brand-colors-lime-700: #093a31;
-  --brand-colors-lime-800: #022321;
-  --brand-colors-lime-900: #011515;
-  --brand-colors-lime-025: #effed9;
-  --brand-colors-lime-050: #e3febd;
+  --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
index 8dea4304..eafabcd8 100644
--- a/src/css/dark-theme-colors.css
+++ b/src/css/dark-theme-colors.css
@@ -3,9 +3,9 @@
 */
 [data-theme='dark'] {
   /* For default neutral backgrounds */
-  --color-background-default: var(--brand-colors-grey-800);
+  --color-background-default: var(--brand-colors-grey-grey800);
   /* For secondary neutral backgrounds. */
-  --color-background-alternative: var(--brand-colors-grey-900);
+  --color-background-alternative: var(--brand-colors-grey-grey900);
   /* For "hover" states that use background-default. */
   --color-background-default-hover: #313235;
   /* For "pressed" states that use background-alternative. */
@@ -19,19 +19,19 @@
   /* For "pressed" state that use no background fill. */
   --color-background-pressed: #ffffff14;
   /* For default neutral text. */
-  --color-text-default: var(--brand-colors-grey-000);
+  --color-text-default: var(--brand-colors-grey-grey000);
   /* For softer contrast neutral text */
-  --color-text-alternative: var(--brand-colors-grey-200);
+  --color-text-alternative: var(--brand-colors-grey-grey200);
   /* For the softest contrast neutral text (not accessible) */
-  --color-text-muted: var(--brand-colors-grey-400);
+  --color-text-muted: var(--brand-colors-grey-grey400);
   /* For default neutral icons */
-  --color-icon-default: var(--brand-colors-grey-000);
+  --color-icon-default: var(--brand-colors-grey-grey000);
   /* For softer neutral icons */
-  --color-icon-alternative: var(--brand-colors-grey-200);
+  --color-icon-alternative: var(--brand-colors-grey-grey200);
   /* For the weakest contrast neutral icons (not accessible) */
-  --color-icon-muted: var(--brand-colors-grey-400);
+  --color-icon-muted: var(--brand-colors-grey-grey400);
   /* For soft contrast neutral border */
-  --color-border-default: var(--brand-colors-grey-400);
+  --color-border-default: var(--brand-colors-grey-grey400);
   /* For the weakest  contrast neutral border */
   --color-border-muted: #848c9629;
   /* For the default shade of screen */
@@ -39,59 +39,59 @@
   /* For a stronger shade of screen */
   --color-overlay-alternative: #000000cc;
   /* For interactive, active, and selected semantics. Used for text, background, icon or border */
-  --color-primary-default: var(--brand-colors-blue-300);
+  --color-primary-default: var(--brand-colors-blue-blue300);
   /* For the stronger contrast primary semantic elements. */
-  --color-primary-alternative: var(--brand-colors-blue-200);
+  --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-900);
+  --color-primary-inverse: var(--brand-colors-grey-grey900);
   /* 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-300);
+  --color-error-default: var(--brand-colors-red-red300);
   /* For the stronger contrast error semantic elements. */
-  --color-error-alternative: var(--brand-colors-red-200);
+  --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-900);
+  --color-error-inverse: var(--brand-colors-grey-grey900);
   /* 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-100);
+  --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-900);
+  --color-warning-inverse: var(--brand-colors-grey-grey900);
   /* 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-300);
+  --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-900);
+  --color-success-inverse: var(--brand-colors-grey-grey900);
   /* 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-300);
+  --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-900);
+  --color-info-inverse: var(--brand-colors-grey-grey900);
   /* For Flask primary accent color. */
-  --color-flask-default: var(--brand-colors-purple-300);
+  --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-900);
+  --color-flask-inverse: var(--brand-colors-grey-grey900);
   /* For neutral drop shadow color. */
   --color-shadow-default: #00000066;
   /* For primary drop shadow color. */
diff --git a/src/css/light-theme-colors.css b/src/css/light-theme-colors.css
index 4424d419..69dbb5bc 100644
--- a/src/css/light-theme-colors.css
+++ b/src/css/light-theme-colors.css
@@ -4,9 +4,9 @@
 :root,
 [data-theme='light'] {
   /* For default neutral backgrounds */
-  --color-background-default: var(--brand-colors-grey-000);
+  --color-background-default: var(--brand-colors-grey-grey000);
   /* For secondary neutral backgrounds. */
-  --color-background-alternative: var(--brand-colors-grey-050);
+  --color-background-alternative: var(--brand-colors-grey-grey050);
   /* For "hover" states that use background-default. */
   --color-background-default-hover: #f5f5f5;
   /* For "pressed" states that use background-alternative. */
@@ -20,19 +20,19 @@
   /* For "pressed" state that use no background fill. */
   --color-background-pressed: #00000014;
   /* For default neutral text. */
-  --color-text-default: var(--brand-colors-grey-900);
+  --color-text-default: var(--brand-colors-grey-grey900);
   /* For softer contrast neutral text */
-  --color-text-alternative: var(--brand-colors-grey-500);
+  --color-text-alternative: var(--brand-colors-grey-grey500);
   /* For the softest contrast neutral text (not accessible) */
-  --color-text-muted: var(--brand-colors-grey-300);
+  --color-text-muted: var(--brand-colors-grey-grey300);
   /* For default neutral icons */
-  --color-icon-default: var(--brand-colors-grey-900);
+  --color-icon-default: var(--brand-colors-grey-grey900);
   /* For softer neutral icons */
-  --color-icon-alternative: var(--brand-colors-grey-500);
+  --color-icon-alternative: var(--brand-colors-grey-grey500);
   /* For the weakest contrast neutral icons (not accessible) */
-  --color-icon-muted: var(--brand-colors-grey-300);
+  --color-icon-muted: var(--brand-colors-grey-grey300);
   /* For soft contrast neutral border */
-  --color-border-default: var(--brand-colors-grey-200);
+  --color-border-default: var(--brand-colors-grey-grey200);
   /* For the weakest  contrast neutral border */
   --color-border-muted: #bbc0c566;
   /* For the default shade of screen */
@@ -40,59 +40,59 @@
   /* For a stronger shade of screen */
   --color-overlay-alternative: #000000cc;
   /* For interactive, active, and selected semantics. Used for text, background, icon or border */
-  --color-primary-default: var(--brand-colors-blue-500);
+  --color-primary-default: var(--brand-colors-blue-blue500);
   /* For the stronger contrast primary semantic elements. */
-  --color-primary-alternative: var(--brand-colors-blue-600);
+  --color-primary-alternative: var(--brand-colors-blue-blue600);
   /* For the weakest contrast primary semantic backgrounds. */
   --color-primary-muted: #0376c91a;
   /* For elements used on top of primary/default. Used for text, icon or border */
-  --color-primary-inverse: var(--brand-colors-grey-000);
+  --color-primary-inverse: var(--brand-colors-grey-grey000);
   /* For the "hover" state of primary-default elements */
   --color-primary-default-hover: #036ab5;
   /* For the "pressed" state of primary-default elements */
   --color-primary-default-pressed: #025ea1;
   /* For the critical alert semantic elements. Used for text, background, icon or border */
-  --color-error-default: var(--brand-colors-red-500);
+  --color-error-default: var(--brand-colors-red-red500);
   /* For the stronger contrast error semantic elements. */
-  --color-error-alternative: var(--brand-colors-red-600);
+  --color-error-alternative: var(--brand-colors-red-red600);
   /* For the weakest contrast critical alert semantic backgrounds. */
   --color-error-muted: #d738471a;
   /* For elements used on top of error/default. Used for text, icon or border */
-  --color-error-inverse: var(--brand-colors-grey-000);
+  --color-error-inverse: var(--brand-colors-grey-grey000);
   /* For the "hover" state of error-default elements. */
   --color-error-default-hover: #d02a3a;
   /* For the "pressed" state of error-default elements. */
   --color-error-default-pressed: #bf2635;
   /* For the caution alert semantic elements. Used for text, background, icon or border */
-  --color-warning-default: var(--brand-colors-yellow-500);
+  --color-warning-default: var(--brand-colors-yellow-yellow500);
   /* For the weakest contrast caution alert semantic backgrounds. */
   --color-warning-muted: #bf52081a;
   /* For elements used on top of warning/default. Used for text, icon or border */
-  --color-warning-inverse: var(--brand-colors-grey-000);
+  --color-warning-inverse: var(--brand-colors-grey-grey000);
   /* For the "hover" state of warning-default elements */
   --color-warning-default-hover: #ac4a07;
   /* For the "pressed" state of warning-default elements */
   --color-warning-default-pressed: #984106;
   /* For the positive semantic elements. Used for text, background, icon or border */
-  --color-success-default: var(--brand-colors-green-500);
+  --color-success-default: var(--brand-colors-green-green500);
   /* For the weakest contrast positive semantic backgrounds. */
   --color-success-muted: #1c82341a;
   /* For elements used on top of success/default. Used for text, icon or border */
-  --color-success-inverse: var(--brand-colors-grey-000);
+  --color-success-inverse: var(--brand-colors-grey-grey000);
   /* For the "hover" state of success-default elements */
   --color-success-default-hover: #18712d;
   /* For the "pressed" state of success-default elements */
   --color-success-default-pressed: #156127;
   /* For informational read-only elements. Used for text, background, icon or border */
-  --color-info-default: var(--brand-colors-blue-500);
+  --color-info-default: var(--brand-colors-blue-blue500);
   /* For the weakest contrast informational semantic backgrounds. */
   --color-info-muted: #0376c91a;
   /* For elements used on top of info/default. Used for text, icon or border */
-  --color-info-inverse: var(--brand-colors-grey-000);
+  --color-info-inverse: var(--brand-colors-grey-grey000);
   /* For Flask primary accent color. */
-  --color-flask-default: var(--brand-colors-purple-500);
+  --color-flask-default: var(--brand-colors-purple-purple500);
   /* For elements used on top of flask/default. Used for text, icon or border */
-  --color-flask-inverse: var(--brand-colors-grey-000);
+  --color-flask-inverse: var(--brand-colors-grey-grey000);
   /* For neutral drop shadow color. */
   --color-shadow-default: #0000001a;
   /* For primary drop shadow color. */

From f451cfd02f4e1b4e18dba87cbbf73d534ab044c9 Mon Sep 17 00:00:00 2001
From: Brian Nguyen <brianacnguyen@gmail.com>
Date: Wed, 29 May 2024 16:40:53 -0700
Subject: [PATCH 03/13] feat: added deprecated css files

---
 src/css/brand-colors-deprecated.css       | 12 +++++++++
 src/css/dark-theme-colors-deprecated.css  | 30 ++++++++++++++++++++++
 src/css/index.css                         |  7 +++--
 src/css/light-theme-colors-deprecated.css | 31 +++++++++++++++++++++++
 4 files changed, 78 insertions(+), 2 deletions(-)
 create mode 100644 src/css/brand-colors-deprecated.css
 create mode 100644 src/css/dark-theme-colors-deprecated.css
 create mode 100644 src/css/light-theme-colors-deprecated.css

diff --git a/src/css/brand-colors-deprecated.css b/src/css/brand-colors-deprecated.css
new file mode 100644
index 00000000..5f0225ab
--- /dev/null
+++ b/src/css/brand-colors-deprecated.css
@@ -0,0 +1,12 @@
+:root {
+  --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-orange-orange000: #fef5ef;
+  --brand-colors-violet-violet300: #cfb5f0;
+  --brand-colors-white-white010: #fcfcfc;
+}
diff --git a/src/css/dark-theme-colors-deprecated.css b/src/css/dark-theme-colors-deprecated.css
new file mode 100644
index 00000000..b23fc27c
--- /dev/null
+++ b/src/css/dark-theme-colors-deprecated.css
@@ -0,0 +1,30 @@
+[data-theme='dark'] {
+  --color-overlay-inverse: var(--brand-colors-white-white010);
+  --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-disabled: #d7384780;
+  --color-error-shadow: #ff526366;
+  --color-warning-alternative: var(--brand-colors-yellow-yellow400);
+  --color-warning-disabled: #ffd33d80;
+  --color-success-alternative: var(--brand-colors-green-green400);
+  --color-success-disabled: #28a74580;
+  --color-info-alternative: var(--brand-colors-blue-blue300);
+  --color-info-disabled: #0376c980;
+  --color-network-goerli-default: var(--brand-colors-blue-blue400);
+  --color-network-goerli-inverse: var(--brand-colors-white-white010);
+  --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);
+  /* Components */
+  /* button */
+  --component-button-primary-shadow: var(--shadow-size-sm)
+    var(--color-primary-shadow);
+  --component-button-danger-shadow: var(--shadow-size-sm)
+    var(--color-error-shadow);
+}
diff --git a/src/css/index.css b/src/css/index.css
index a8613006..bf83a237 100644
--- a/src/css/index.css
+++ b/src/css/index.css
@@ -1,5 +1,8 @@
 @import './brand-colors.css';
-@import './light-theme-colors.css';
-@import './dark-theme-colors.css';
+@import './brand-colors-deprecated.css';
 @import './typography.css';
 @import './shadow.css';
+@import './light-theme-colors.css';
+@import './light-theme-colors-deprecated.css';
+@import './dark-theme-colors.css';
+@import './dark-theme-colors-deprecated.css';
diff --git a/src/css/light-theme-colors-deprecated.css b/src/css/light-theme-colors-deprecated.css
new file mode 100644
index 00000000..7e474023
--- /dev/null
+++ b/src/css/light-theme-colors-deprecated.css
@@ -0,0 +1,31 @@
+:root,
+[data-theme='light'] {
+  --color-overlay-inverse: var(--brand-colors-white-white010);
+  --color-primary-disabled: #0376c980;
+  --color-primary-shadow: #0376c933;
+  --color-secondary-default: var(--brand-colors-orange-orange500);
+  --color-secondary-alternative: var(--brand-colors-orange-orange600);
+  --color-secondary-muted: #f66a0a19;
+  --color-secondary-inverse: var(--brand-colors-white-white000);
+  --color-secondary-disabled: #f66a0a80;
+  --color-error-disabled: #d7384780;
+  --color-error-shadow: #d7384766;
+  --color-warning-alternative: var(--brand-colors-yellow-yellow600);
+  --color-warning-disabled: #ffd33d80;
+  --color-success-alternative: var(--brand-colors-green-green500);
+  --color-success-disabled: #28a74580;
+  --color-info-alternative: var(--brand-colors-blue-blue600);
+  --color-info-disabled: #0376c980;
+  --color-network-goerli-default: var(--brand-colors-blue-blue400);
+  --color-network-goerli-inverse: var(--brand-colors-white-white010);
+  --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);
+  /* Components */
+  /* button */
+  --component-button-primary-shadow: var(--shadow-size-sm)
+    var(--color-primary-shadow);
+  --component-button-danger-shadow: var(--shadow-size-sm)
+    var(--color-error-shadow);
+}

From 10ce2f044b0bd6b7ff67c8a6387db16bf342ab9b Mon Sep 17 00:00:00 2001
From: Brian Nguyen <brianacnguyen@gmail.com>
Date: Wed, 29 May 2024 18:01:55 -0700
Subject: [PATCH 04/13] refactor: updated migration changelist based on
 comments

---
 MIGRATION.md | 29 ++++++++++++++++++++---------
 1 file changed, 20 insertions(+), 9 deletions(-)

diff --git a/MIGRATION.md b/MIGRATION.md
index 2a9b44e3..eef33452 100644
--- a/MIGRATION.md
+++ b/MIGRATION.md
@@ -18,18 +18,15 @@ In this version, significant updates have been made to color tokens, including a
 --brand-colors-grey-grey030
 --brand-colors-grey-grey040
 --brand-colors-grey-grey750
---brand-colors-blue-blue000
---brand-colors-green-green000
---brand-colors-red-red000
---brand-colors-yellow-yellow000
---brand-colors-orange-orange000
 --brand-colors-violet
 --brand-colors-white-white010
 --color-overlay-inverse
---color-primary-shadow
 --color-primary-disabled
---color-secondary
---color-error-shadow
+--color-secondary-default
+--color-secondary-alternative
+--color-secondary-muted
+--color-secondary-inverse
+--color-secondary-disabled
 --color-error-disabled
 --color-warning-alternative
 --color-warning-disabled
@@ -37,7 +34,14 @@ In this version, significant updates have been made to color tokens, including a
 --color-success-disabled
 --color-info-alternative
 --color-info-disabled
---color-network-
+--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-button-primary-shadow
+--component-button-danger-shadow
 ```
 
 ### Changed
@@ -45,8 +49,15 @@ In this version, significant updates have been made to color tokens, including a
 #### CSS
 
 ```
+--brand-colors-blue-blue000 to --brand-colors-blue-blue025
+--brand-colors-green-green000 to --brand-colors-green-green025
+--brand-colors-red-red000 to --brand-colors-red-red025
+--brand-colors-yellow-yellow000 to --brand-colors-yellow-yellow025
+--brand-colors-orange-orange000 to --brand-colors-orange-orange025
 --brand-colors-white-white000 to --brand-colors-white
 --brand-colors-black-black000 to --brand-colors-black
+--color-primary-shadow
+--color-error-shadow
 ```
 
 ### Themed Colors

From b6473d380d1ed1f26425a8c8ca02e1f27c44311c Mon Sep 17 00:00:00 2001
From: Brian Nguyen <brianacnguyen@gmail.com>
Date: Wed, 29 May 2024 23:52:26 -0700
Subject: [PATCH 05/13] refactor: updated migration doc

---
 MIGRATION.md | 183 ++++++++++++++++++++++++++++++++++++---------------
 1 file changed, 130 insertions(+), 53 deletions(-)

diff --git a/MIGRATION.md b/MIGRATION.md
index eef33452..1e555c29 100644
--- a/MIGRATION.md
+++ b/MIGRATION.md
@@ -10,63 +10,109 @@ This guide provides detailed instructions for migrating your project from one ve
 
 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:
 
-### Removed
-
-#### CSS
-
-```
---brand-colors-grey-grey030
---brand-colors-grey-grey040
---brand-colors-grey-grey750
---brand-colors-violet
---brand-colors-white-white010
---color-overlay-inverse
---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-button-primary-shadow
---component-button-danger-shadow
-```
-
-### Changed
-
-#### CSS
+### 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 Tokens
 
 ```
---brand-colors-blue-blue000 to --brand-colors-blue-blue025
---brand-colors-green-green000 to --brand-colors-green-green025
---brand-colors-red-red000 to --brand-colors-red-red025
---brand-colors-yellow-yellow000 to --brand-colors-yellow-yellow025
---brand-colors-orange-orange000 to --brand-colors-orange-orange025
---brand-colors-white-white000 to --brand-colors-white
---brand-colors-black-black000 to --brand-colors-black
---color-primary-shadow
---color-error-shadow
+--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 removed
+- primary-shadow modified to shadow-primary
 - primary-disabled removed
-- secondary colors removed
-- error-shadow 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
@@ -74,10 +120,41 @@ In this version, significant updates have been made to color tokens, including a
 - success-disabled removed
 - info-alternative removed
 - info-disabled removed
-- network colors removed
-- shadow-primary added
-- shadow-error added
-- button colors 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 9907b98de740fca75bf15cfa1e1085c763e5c8e5 Mon Sep 17 00:00:00 2001
From: Brian Nguyen <brianacnguyen@gmail.com>
Date: Wed, 29 May 2024 23:55:55 -0700
Subject: [PATCH 06/13] refactor: updated title for css part in migration doc

---
 MIGRATION.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/MIGRATION.md b/MIGRATION.md
index 1e555c29..68880a09 100644
--- a/MIGRATION.md
+++ b/MIGRATION.md
@@ -55,7 +55,7 @@ In this version, significant updates have been made to color tokens, including a
 - white-010 removed
 - black-000 modified to black
 
-#### CSS Tokens
+#### CSS Variables
 
 ```
 --brand-colors-grey-grey030 modified to --brand-colors-grey-grey025

From 3ee2b4f4f37c9943fb016afbcb029926ea2a9f56 Mon Sep 17 00:00:00 2001
From: Brian Nguyen <brianacnguyen@gmail.com>
Date: Wed, 29 May 2024 23:59:41 -0700
Subject: [PATCH 07/13] refactor: simplified deprecated tokens

---
 src/css/brand-colors-deprecated.css       | 12 ---------
 src/css/brand-colors.css                  | 11 ++++++++
 src/css/dark-theme-colors-deprecated.css  | 30 ----------------------
 src/css/dark-theme-colors.css             | 27 ++++++++++++++++++++
 src/css/index.css                         |  3 ---
 src/css/light-theme-colors-deprecated.css | 31 -----------------------
 src/css/light-theme-colors.css            | 27 ++++++++++++++++++++
 7 files changed, 65 insertions(+), 76 deletions(-)
 delete mode 100644 src/css/brand-colors-deprecated.css
 delete mode 100644 src/css/dark-theme-colors-deprecated.css
 delete mode 100644 src/css/light-theme-colors-deprecated.css

diff --git a/src/css/brand-colors-deprecated.css b/src/css/brand-colors-deprecated.css
deleted file mode 100644
index 5f0225ab..00000000
--- a/src/css/brand-colors-deprecated.css
+++ /dev/null
@@ -1,12 +0,0 @@
-:root {
-  --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-orange-orange000: #fef5ef;
-  --brand-colors-violet-violet300: #cfb5f0;
-  --brand-colors-white-white010: #fcfcfc;
-}
diff --git a/src/css/brand-colors.css b/src/css/brand-colors.css
index 0884a581..da9006b7 100644
--- a/src/css/brand-colors.css
+++ b/src/css/brand-colors.css
@@ -107,4 +107,15 @@
   /* 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-orange-orange000: #fef5ef;
+  --brand-colors-violet-violet300: #cfb5f0;
+  --brand-colors-white-white010: #fcfcfc;
 }
diff --git a/src/css/dark-theme-colors-deprecated.css b/src/css/dark-theme-colors-deprecated.css
deleted file mode 100644
index b23fc27c..00000000
--- a/src/css/dark-theme-colors-deprecated.css
+++ /dev/null
@@ -1,30 +0,0 @@
-[data-theme='dark'] {
-  --color-overlay-inverse: var(--brand-colors-white-white010);
-  --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-disabled: #d7384780;
-  --color-error-shadow: #ff526366;
-  --color-warning-alternative: var(--brand-colors-yellow-yellow400);
-  --color-warning-disabled: #ffd33d80;
-  --color-success-alternative: var(--brand-colors-green-green400);
-  --color-success-disabled: #28a74580;
-  --color-info-alternative: var(--brand-colors-blue-blue300);
-  --color-info-disabled: #0376c980;
-  --color-network-goerli-default: var(--brand-colors-blue-blue400);
-  --color-network-goerli-inverse: var(--brand-colors-white-white010);
-  --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);
-  /* Components */
-  /* button */
-  --component-button-primary-shadow: var(--shadow-size-sm)
-    var(--color-primary-shadow);
-  --component-button-danger-shadow: var(--shadow-size-sm)
-    var(--color-error-shadow);
-}
diff --git a/src/css/dark-theme-colors.css b/src/css/dark-theme-colors.css
index eafabcd8..5d673fbd 100644
--- a/src/css/dark-theme-colors.css
+++ b/src/css/dark-theme-colors.css
@@ -98,4 +98,31 @@
   --color-shadow-primary: #43aefc33;
   /* For critical/danger drop shadow color. */
   --color-shadow-error: #ff758466;
+  /* Deprecated - To be removed */
+  --color-overlay-inverse: var(--brand-colors-white-white010);
+  --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-disabled: #d7384780;
+  --color-error-shadow: #ff526366;
+  --color-warning-alternative: var(--brand-colors-yellow-yellow400);
+  --color-warning-disabled: #ffd33d80;
+  --color-success-alternative: var(--brand-colors-green-green400);
+  --color-success-disabled: #28a74580;
+  --color-info-alternative: var(--brand-colors-blue-blue300);
+  --color-info-disabled: #0376c980;
+  --color-network-goerli-default: var(--brand-colors-blue-blue400);
+  --color-network-goerli-inverse: var(--brand-colors-white-white010);
+  --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);
+  --component-button-primary-shadow: var(--shadow-size-sm)
+    var(--color-primary-shadow);
+  --component-button-danger-shadow: var(--shadow-size-sm)
+    var(--color-error-shadow);
 }
diff --git a/src/css/index.css b/src/css/index.css
index bf83a237..756b749d 100644
--- a/src/css/index.css
+++ b/src/css/index.css
@@ -1,8 +1,5 @@
 @import './brand-colors.css';
-@import './brand-colors-deprecated.css';
 @import './typography.css';
 @import './shadow.css';
 @import './light-theme-colors.css';
-@import './light-theme-colors-deprecated.css';
 @import './dark-theme-colors.css';
-@import './dark-theme-colors-deprecated.css';
diff --git a/src/css/light-theme-colors-deprecated.css b/src/css/light-theme-colors-deprecated.css
deleted file mode 100644
index 7e474023..00000000
--- a/src/css/light-theme-colors-deprecated.css
+++ /dev/null
@@ -1,31 +0,0 @@
-:root,
-[data-theme='light'] {
-  --color-overlay-inverse: var(--brand-colors-white-white010);
-  --color-primary-disabled: #0376c980;
-  --color-primary-shadow: #0376c933;
-  --color-secondary-default: var(--brand-colors-orange-orange500);
-  --color-secondary-alternative: var(--brand-colors-orange-orange600);
-  --color-secondary-muted: #f66a0a19;
-  --color-secondary-inverse: var(--brand-colors-white-white000);
-  --color-secondary-disabled: #f66a0a80;
-  --color-error-disabled: #d7384780;
-  --color-error-shadow: #d7384766;
-  --color-warning-alternative: var(--brand-colors-yellow-yellow600);
-  --color-warning-disabled: #ffd33d80;
-  --color-success-alternative: var(--brand-colors-green-green500);
-  --color-success-disabled: #28a74580;
-  --color-info-alternative: var(--brand-colors-blue-blue600);
-  --color-info-disabled: #0376c980;
-  --color-network-goerli-default: var(--brand-colors-blue-blue400);
-  --color-network-goerli-inverse: var(--brand-colors-white-white010);
-  --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);
-  /* Components */
-  /* button */
-  --component-button-primary-shadow: var(--shadow-size-sm)
-    var(--color-primary-shadow);
-  --component-button-danger-shadow: var(--shadow-size-sm)
-    var(--color-error-shadow);
-}
diff --git a/src/css/light-theme-colors.css b/src/css/light-theme-colors.css
index 69dbb5bc..86e0d75f 100644
--- a/src/css/light-theme-colors.css
+++ b/src/css/light-theme-colors.css
@@ -99,4 +99,31 @@
   --color-shadow-primary: #0376c933;
   /* For critical/danger drop shadow color. */
   --color-shadow-error: #ca354266;
+  /* Deprecated - To be removed */
+  --color-overlay-inverse: var(--brand-colors-white-white010);
+  --color-primary-disabled: #0376c980;
+  --color-primary-shadow: #0376c933;
+  --color-secondary-default: var(--brand-colors-orange-orange500);
+  --color-secondary-alternative: var(--brand-colors-orange-orange600);
+  --color-secondary-muted: #f66a0a19;
+  --color-secondary-inverse: var(--brand-colors-white-white000);
+  --color-secondary-disabled: #f66a0a80;
+  --color-error-disabled: #d7384780;
+  --color-error-shadow: #d7384766;
+  --color-warning-alternative: var(--brand-colors-yellow-yellow600);
+  --color-warning-disabled: #ffd33d80;
+  --color-success-alternative: var(--brand-colors-green-green500);
+  --color-success-disabled: #28a74580;
+  --color-info-alternative: var(--brand-colors-blue-blue600);
+  --color-info-disabled: #0376c980;
+  --color-network-goerli-default: var(--brand-colors-blue-blue400);
+  --color-network-goerli-inverse: var(--brand-colors-white-white010);
+  --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);
+  --component-button-primary-shadow: var(--shadow-size-sm)
+    var(--color-primary-shadow);
+  --component-button-danger-shadow: var(--shadow-size-sm)
+    var(--color-error-shadow);
 }

From e05e0d9ed9887b512e73bd8beb3e893a96a0d82d Mon Sep 17 00:00:00 2001
From: Brian Nguyen <brianacnguyen@gmail.com>
Date: Thu, 30 May 2024 11:12:10 -0700
Subject: [PATCH 08/13] refactor: removed deprecated colors and updated
 migration doc

---
 MIGRATION.md                   | 100 +--------------------------------
 src/css/brand-colors.css       |  11 ----
 src/css/dark-theme-colors.css  |  27 ---------
 src/css/light-theme-colors.css |  27 ---------
 4 files changed, 1 insertion(+), 164 deletions(-)

diff --git a/MIGRATION.md b/MIGRATION.md
index 68880a09..eb0741e0 100644
--- a/MIGRATION.md
+++ b/MIGRATION.md
@@ -8,95 +8,22 @@ This guide provides detailed instructions for migrating your project from one ve
 
 ### 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:
+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
 
-- 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
@@ -104,31 +31,6 @@ In this version, significant updates have been made to color tokens, including a
 
 ### 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
 
 ```
diff --git a/src/css/brand-colors.css b/src/css/brand-colors.css
index da9006b7..0884a581 100644
--- a/src/css/brand-colors.css
+++ b/src/css/brand-colors.css
@@ -107,15 +107,4 @@
   /* 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-orange-orange000: #fef5ef;
-  --brand-colors-violet-violet300: #cfb5f0;
-  --brand-colors-white-white010: #fcfcfc;
 }
diff --git a/src/css/dark-theme-colors.css b/src/css/dark-theme-colors.css
index 5d673fbd..eafabcd8 100644
--- a/src/css/dark-theme-colors.css
+++ b/src/css/dark-theme-colors.css
@@ -98,31 +98,4 @@
   --color-shadow-primary: #43aefc33;
   /* For critical/danger drop shadow color. */
   --color-shadow-error: #ff758466;
-  /* Deprecated - To be removed */
-  --color-overlay-inverse: var(--brand-colors-white-white010);
-  --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-disabled: #d7384780;
-  --color-error-shadow: #ff526366;
-  --color-warning-alternative: var(--brand-colors-yellow-yellow400);
-  --color-warning-disabled: #ffd33d80;
-  --color-success-alternative: var(--brand-colors-green-green400);
-  --color-success-disabled: #28a74580;
-  --color-info-alternative: var(--brand-colors-blue-blue300);
-  --color-info-disabled: #0376c980;
-  --color-network-goerli-default: var(--brand-colors-blue-blue400);
-  --color-network-goerli-inverse: var(--brand-colors-white-white010);
-  --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);
-  --component-button-primary-shadow: var(--shadow-size-sm)
-    var(--color-primary-shadow);
-  --component-button-danger-shadow: var(--shadow-size-sm)
-    var(--color-error-shadow);
 }
diff --git a/src/css/light-theme-colors.css b/src/css/light-theme-colors.css
index 86e0d75f..69dbb5bc 100644
--- a/src/css/light-theme-colors.css
+++ b/src/css/light-theme-colors.css
@@ -99,31 +99,4 @@
   --color-shadow-primary: #0376c933;
   /* For critical/danger drop shadow color. */
   --color-shadow-error: #ca354266;
-  /* Deprecated - To be removed */
-  --color-overlay-inverse: var(--brand-colors-white-white010);
-  --color-primary-disabled: #0376c980;
-  --color-primary-shadow: #0376c933;
-  --color-secondary-default: var(--brand-colors-orange-orange500);
-  --color-secondary-alternative: var(--brand-colors-orange-orange600);
-  --color-secondary-muted: #f66a0a19;
-  --color-secondary-inverse: var(--brand-colors-white-white000);
-  --color-secondary-disabled: #f66a0a80;
-  --color-error-disabled: #d7384780;
-  --color-error-shadow: #d7384766;
-  --color-warning-alternative: var(--brand-colors-yellow-yellow600);
-  --color-warning-disabled: #ffd33d80;
-  --color-success-alternative: var(--brand-colors-green-green500);
-  --color-success-disabled: #28a74580;
-  --color-info-alternative: var(--brand-colors-blue-blue600);
-  --color-info-disabled: #0376c980;
-  --color-network-goerli-default: var(--brand-colors-blue-blue400);
-  --color-network-goerli-inverse: var(--brand-colors-white-white010);
-  --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);
-  --component-button-primary-shadow: var(--shadow-size-sm)
-    var(--color-primary-shadow);
-  --component-button-danger-shadow: var(--shadow-size-sm)
-    var(--color-error-shadow);
 }

From 2a8bb16e655c9db5eea2a98dc0c524b2e09ad4d9 Mon Sep 17 00:00:00 2001
From: Brian Nguyen <brianacnguyen@gmail.com>
Date: Thu, 30 May 2024 11:16:39 -0700
Subject: [PATCH 09/13] refactor: updated css naming

---
 MIGRATION.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/MIGRATION.md b/MIGRATION.md
index eb0741e0..01b96aa6 100644
--- a/MIGRATION.md
+++ b/MIGRATION.md
@@ -31,7 +31,7 @@ In this version, significant updates have been made to color tokens, including m
 
 ### Themed Colors
 
-#### CSS Tokens
+#### CSS Variables
 
 ```
 --color-overlay-inverse removed

From fef3953c111fc6106a5db33cf51c7f5d856b6ad5 Mon Sep 17 00:00:00 2001
From: Brian Nguyen <brianacnguyen@gmail.com>
Date: Thu, 30 May 2024 11:18:43 -0700
Subject: [PATCH 10/13] refactor: nit changes

---
 MIGRATION.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/MIGRATION.md b/MIGRATION.md
index 01b96aa6..1bff73be 100644
--- a/MIGRATION.md
+++ b/MIGRATION.md
@@ -8,7 +8,7 @@ This guide provides detailed instructions for migrating your project from one ve
 
 ### 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:
+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
 

From 05ea5c5cd0078e075894f952c6b1f3ad4dcbb0ad Mon Sep 17 00:00:00 2001
From: Brian Nguyen <brianacnguyen@gmail.com>
Date: Thu, 30 May 2024 15:39:05 -0700
Subject: [PATCH 11/13] feat: readded overlay inverse back to css variables

---
 MIGRATION.md                   | 1 -
 src/css/dark-theme-colors.css  | 2 ++
 src/css/light-theme-colors.css | 2 ++
 3 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/MIGRATION.md b/MIGRATION.md
index 1bff73be..1817bd7b 100644
--- a/MIGRATION.md
+++ b/MIGRATION.md
@@ -34,7 +34,6 @@ In this version, significant updates have been made to color tokens, including m
 #### CSS Variables
 
 ```
---color-overlay-inverse removed
 --color-primary-shadow modified to --color-shadow-primary
 --color-primary-disabled removed
 --color-secondary-default removed
diff --git a/src/css/dark-theme-colors.css b/src/css/dark-theme-colors.css
index eafabcd8..40ab429f 100644
--- a/src/css/dark-theme-colors.css
+++ b/src/css/dark-theme-colors.css
@@ -38,6 +38,8 @@
   --color-overlay-default: #00000099;
   /* For a stronger shade of screen */
   --color-overlay-alternative: #000000cc;
+  /* 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. */
diff --git a/src/css/light-theme-colors.css b/src/css/light-theme-colors.css
index 69dbb5bc..8a831ca2 100644
--- a/src/css/light-theme-colors.css
+++ b/src/css/light-theme-colors.css
@@ -39,6 +39,8 @@
   --color-overlay-default: #00000099;
   /* For a stronger shade of screen */
   --color-overlay-alternative: #000000cc;
+  /* 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-blue500);
   /* For the stronger contrast primary semantic elements. */

From e37ca563f9a5d6c67161bcf8a50ce1883f50ca81 Mon Sep 17 00:00:00 2001
From: georgewrmarshall <george.marshall@consensys.net>
Date: Thu, 30 May 2024 16:32:31 -0700
Subject: [PATCH 12/13] docs: updating migrations doc layout

---
 MIGRATION.md | 89 ++++++++++++++++++++++++++++++++--------------------
 1 file changed, 55 insertions(+), 34 deletions(-)

diff --git a/MIGRATION.md b/MIGRATION.md
index 1817bd7b..e968c83f 100644
--- a/MIGRATION.md
+++ b/MIGRATION.md
@@ -2,62 +2,83 @@
 
 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
+- [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)
 
-## Migration 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 are not present in your codebase:
+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
+```
 
-### Brand Colors
+### Changed
 
-#### CSS Variables
+#### 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-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
 
-```
+## Theme colors
 --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)
+#### JS
+
+```
+TBC
+```
 
 ## From version 2.1.1 to 3.0.0
 

From c8b61c89b22d1fe22ac9e39c42605de9aa3d5178 Mon Sep 17 00:00:00 2001
From: georgewrmarshall <george.marshall@consensys.net>
Date: Thu, 30 May 2024 16:32:51 -0700
Subject: [PATCH 13/13] chore: reverting css import order

---
 src/css/index.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/css/index.css b/src/css/index.css
index 756b749d..a8613006 100644
--- a/src/css/index.css
+++ b/src/css/index.css
@@ -1,5 +1,5 @@
 @import './brand-colors.css';
-@import './typography.css';
-@import './shadow.css';
 @import './light-theme-colors.css';
 @import './dark-theme-colors.css';
+@import './typography.css';
+@import './shadow.css';