chore: updating js tokens with overlay inverse

MetaMask · May 30, 2024 · 0dd8193 · 0dd8193
1 parent 6471cf4
commit 0dd8193
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 0 deletions.
diff --git a/src/js/themes/darkTheme/colors.ts b/src/js/themes/darkTheme/colors.ts
@@ -29,6 +29,7 @@ export const colors: ThemeColors = {
   overlay: {
     default: '#00000099', // For the default shade of screen
     alternative: '#000000cc', // For a stronger shade of screen
+    inverse: brandColor.grey000, // For elements used on top of overlay/alternative. Used for text, icon or border
   },
   primary: {
     default: brandColor.blue300, // For interactive, active, and selected semantics. Used for text, background, icon or border

diff --git a/src/js/themes/lightTheme/colors.ts b/src/js/themes/lightTheme/colors.ts
@@ -29,6 +29,7 @@ export const colors: ThemeColors = {
   overlay: {
     default: '#00000099', // For the default shade of screen
     alternative: '#000000cc', // For a stronger shade of screen
+    inverse: brandColor.grey000, // For elements used on top of overlay/alternative. Used for text, icon or border
   },
   primary: {
     default: brandColor.blue500, // For interactive, active, and selected semantics. Used for text, background, icon or border

diff --git a/src/js/themes/types.ts b/src/js/themes/types.ts
@@ -103,6 +103,10 @@ export type ThemeColors = {
      * {string} overlay.alternative - For a stronger shading layer option behind modality screens
      */
     alternative: string;
+    /**
+     * {string} overlay.inverse - For elements used on top of overlay/alternative. Used for text, icon or border
+     */
+    inverse: string;
   };
   shadow: {
     /**