From 01572abe0b2f8e7a235aaee303428ecbdacf9550 Mon Sep 17 00:00:00 2001
From: Thomas Heartman <thomas@getunleash.io>
Date: Wed, 10 Dec 2025 13:32:45 +0100
Subject: [PATCH] chore: update colors for new in Unleah toast / add
 palette.inverse (#11109)

Adds a new `palette.inverse` property to the theme and uses it for the
New in Unleash toast.

Toast with new colors in light mode:
<img width="626" height="222" alt="image"
src="https://github.com/user-attachments/assets/2264dd00-117b-493f-8ce7-ff1a173d622d"
/>

Dark mode:
<img width="710" height="264" alt="image"
src="https://github.com/user-attachments/assets/14b27bc3-f516-46fc-9422-db08a7112f4f"
/>
---
 .../NavigationSidebar/NewInUnleash/NewInUnleashToast.tsx     | 4 ++--
 frontend/src/themes/dark-theme.ts                            | 5 +++++
 frontend/src/themes/theme.ts                                 | 5 +++++
 frontend/src/themes/themeTypes.ts                            | 5 +++++
 4 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/frontend/src/component/layout/MainLayout/NavigationSidebar/NewInUnleash/NewInUnleashToast.tsx b/frontend/src/component/layout/MainLayout/NavigationSidebar/NewInUnleash/NewInUnleashToast.tsx
index 0d63dcf39e..0c353ee2eb 100644
--- a/frontend/src/component/layout/MainLayout/NavigationSidebar/NewInUnleash/NewInUnleashToast.tsx
+++ b/frontend/src/component/layout/MainLayout/NavigationSidebar/NewInUnleash/NewInUnleashToast.tsx
@@ -36,8 +36,8 @@ const StyledIcon = styled(NewReleases)(({ theme }) => ({
 }));
 
 const NewInUnleashBody = styled('article')(({ theme }) => ({
-    backgroundColor: theme.palette.common.black,
-    color: theme.palette.common.white,
+    backgroundColor: theme.palette.inverse.main,
+    color: theme.palette.inverse.contrastText,
     padding: theme.spacing(1.5),
     borderRadius: theme.shape.borderRadiusLarge,
     position: 'relative',
diff --git a/frontend/src/themes/dark-theme.ts b/frontend/src/themes/dark-theme.ts
index 535ed0441c..e29bc48e67 100644
--- a/frontend/src/themes/dark-theme.ts
+++ b/frontend/src/themes/dark-theme.ts
@@ -230,6 +230,11 @@ const theme = {
             E1: '#68A611',
             series: colors.chartSeries,
         },
+
+        inverse: {
+            main: '#EEEEFC',
+            contrastText: colors.grey[900],
+        },
     },
 } as const;
 
diff --git a/frontend/src/themes/theme.ts b/frontend/src/themes/theme.ts
index 98452b8e19..f06c448c8a 100644
--- a/frontend/src/themes/theme.ts
+++ b/frontend/src/themes/theme.ts
@@ -286,6 +286,11 @@ const theme = {
             E1: '#68A611',
             series: colors.chartSeries,
         },
+
+        inverse: {
+            main: '#222130',
+            contrastText: '#EEEEFC',
+        },
     },
 } as const;
 
diff --git a/frontend/src/themes/themeTypes.ts b/frontend/src/themes/themeTypes.ts
index c750316d2a..c4dd271df5 100644
--- a/frontend/src/themes/themeTypes.ts
+++ b/frontend/src/themes/themeTypes.ts
@@ -148,6 +148,11 @@ declare module '@mui/material/styles' {
             E1: string;
             series: string[];
         };
+
+        inverse: {
+            main: string;
+            contrastText: string;
+        };
     }
     interface Theme extends CustomTheme {}
     interface ThemeOptions extends CustomTheme {}