fix(ui): use inverted colors for toast indicator (#30204)

ToastIndicator should use color aliases (textColor, subtext,…) instead of base colors (gray500, gray300,…). Also, we want toasts to have inverted colors (i.e. a dark background in light theme and vice versa), so we should have an inverted color scheme inside the theme object.

static/app/components/alerts/toastIndicator.tsx

@@ -62,10 +62,10 @@ const Toast = styled(motion.div)`
   height: 40px;
   padding: 0 15px 0 10px;
   margin-top: 15px;
-  background: ${p => p.theme.gray500};
-  color: #fff;
+  background: ${p => p.theme.inverted.background};
+  color: ${p => p.theme.inverted.textColor};
   border-radius: 44px 7px 7px 44px;
-  box-shadow: 0 4px 12px 0 rgba(47, 40, 55, 0.16);
+  box-shadow: ${p => p.theme.dropShadowHeavy};
   position: relative;
 `;
 
@@ -104,21 +104,21 @@ const Message = styled('div')`
 
 const Undo = styled('div')`
   display: inline-block;
-  color: ${p => p.theme.gray300};
+  color: ${p => p.theme.inverted.subText};
   padding-left: ${space(2)};
   margin-left: ${space(2)};
-  border-left: 1px solid ${p => p.theme.gray200};
+  border-left: 1px solid ${p => p.theme.inverted.innerBorder};
   cursor: pointer;
 
   &:hover {
-    color: ${p => p.theme.gray200};
+    color: ${p => p.theme.inverted.textColor};
   }
 `;
 
 const StyledLoadingIndicator = styled(LoadingIndicator)`
   .loading-indicator {
-    border-color: ${p => p.theme.gray500};
-    border-left-color: ${p => p.theme.purple300};
+    border-color: ${p => p.theme.inverted.border};
+    border-left-color: ${p => p.theme.inverted.purple300};
   }
 `;
 

static/app/utils/theme.tsx

@@ -677,12 +677,17 @@ const commonTheme = {
 };
 
 const lightAliases = generateAliases(lightColors);
+const darkAliases = generateAliases(darkColors);
 
 export const lightTheme = {
   ...commonTheme,
   ...lightColors,
   ...lightAliases,
   ...lightShadows,
+  inverted: {
+    ...darkColors,
+    ...darkAliases,
+  },
   alert: generateAlertTheme(lightColors, lightAliases),
   badge: generateBadgeTheme(lightColors),
   button: generateButtonTheme(lightColors, lightAliases),
@@ -693,13 +698,15 @@ export const lightTheme = {
   sidebarBorder: 'transparent',
 };
 
-const darkAliases = generateAliases(darkColors);
-
 export const darkTheme: Theme = {
   ...commonTheme,
   ...darkColors,
   ...darkAliases,
   ...darkShadows,
+  inverted: {
+    ...lightColors,
+    ...lightAliases,
+  },
   alert: generateAlertTheme(darkColors, darkAliases),
   badge: generateBadgeTheme(darkColors),
   button: generateButtonTheme(darkColors, darkAliases),