fix(ui2): contrast for upgrade banners (#97169)

The `BannerAlert` component explicitly sets a high contrast
backgroundColor / color to be distinguishable from the rest of the page:

light mode has a dark banner:

<img width="1211" height="145" alt="Screenshot 2025-08-05 at 15 45 04"
src="https://github.com/user-attachments/assets/c7e6ae93-0417-463b-98ae-fdb6ea3f5a35"
/>

dark mode has a light banner:

<img width="1211" height="145" alt="Screenshot 2025-08-05 at 15 45 10"
src="https://github.com/user-attachments/assets/349d1bb6-22c2-4586-a6bb-86e493dbf4f2"
/>

but this approach with custom style overrides doesn’t work in UI2 - they
are ignored, thus leaving us with banners that look the same as the
background, which makes them not stick out at all:

<img width="1211" height="145" alt="Screenshot 2025-08-05 at 15 44 56"
src="https://github.com/user-attachments/assets/d3c1813b-b78c-4b23-bdbd-ba59dbdb8eb1"
/>

<img width="1211" height="145" alt="Screenshot 2025-08-05 at 15 44 59"
src="https://github.com/user-attachments/assets/4e79e273-0caf-4bb2-b672-a056a3fe7d50"
/>

---

To fix this in UI2, I’ve simply inverted the theme to show a regular
light banner in dark mode and a dark banner in light mode, without any
custom styles:

| how it’s now, light mode | how it’s now, dark mode |
|--------|--------|
| <img width="1211" height="145" alt="Screenshot 2025-08-05 at 15 37 29"
src="https://github.com/user-attachments/assets/f63f8e76-d3e0-4502-b1d9-179f8fa0d5f2"
/> | <img width="1211" height="145" alt="Screenshot 2025-08-05 at 15 37
24"
src="https://github.com/user-attachments/assets/3b84bcb2-0723-49fc-877e-161fdb511be9"
/> |
| <img width="1211" height="145" alt="Screenshot 2025-08-05 at 15 37 34"
src="https://github.com/user-attachments/assets/f1fc24d5-4aac-4d50-9bb9-0b9e8659f2d5"
/> | <img width="1211" height="145" alt="Screenshot 2025-08-05 at 15 37
18"
src="https://github.com/user-attachments/assets/d2b6a91f-a925-4e42-9a29-84133fba0421"
/> |
| <img width="1211" height="145" alt="Screenshot 2025-08-05 at 15 39 25"
src="https://github.com/user-attachments/assets/68322cfe-256d-4362-b574-39d2c407bcb9"
/> | <img width="1211" height="145" alt="Screenshot 2025-08-05 at 15 39
29"
src="https://github.com/user-attachments/assets/0dd1d525-9576-4241-a8bb-fb09bea629fd"
/> |
| <img width="1211" height="145" alt="Screenshot 2025-08-05 at 15 39 20"
src="https://github.com/user-attachments/assets/a2e68329-66b7-4ee6-a2d7-f594350ea87b"
/> | <img width="1211" height="145" alt="Screenshot 2025-08-05 at 15 39
32"
src="https://github.com/user-attachments/assets/0981df92-374a-43b5-bb37-02f1bd5e338b"
/> |

Author: TkDodo

static/app/utils/theme/theme.chonk.tsx

@@ -943,11 +943,6 @@ const generateAliases = (
     warning: colors.yellow200,
     warningActive: color(colors.yellow200).opaquer(1).string(),
   },
-
-  /**
-   * Background of alert banners at the top
-   */
-  bannerBackground: colors.gray500,
 });
 
 const fontSize = {

static/app/utils/theme/theme.tsx

@@ -437,11 +437,6 @@ const generateThemeAliases = (colors: Colors) => ({
     warning: colors.yellow200,
     warningActive: color(colors.yellow200).opaquer(1).string(),
   },
-
-  /**
-   * Background of alert banners at the top
-   */
-  bannerBackground: colors.gray500,
 });
 
 type Alert = 'muted' | 'info' | 'warning' | 'success' | 'error';

static/gsApp/components/gsBanner.tsx

@@ -1,4 +1,5 @@
 import React, {Component, Fragment} from 'react';
+import {ThemeProvider} from '@emotion/react';
 import styled from '@emotion/styled';
 import * as Sentry from '@sentry/react';
 import Cookies from 'js-cookie';
@@ -16,7 +17,7 @@ import {
   promptsUpdate,
 } from 'sentry/actionCreators/prompts';
 import type {Client} from 'sentry/api';
-import {Alert} from 'sentry/components/core/alert';
+import {Alert, type AlertProps} from 'sentry/components/core/alert';
 import {Badge} from 'sentry/components/core/badge';
 import {Button} from 'sentry/components/core/button';
 import {ButtonBar} from 'sentry/components/core/button/buttonBar';
@@ -33,6 +34,7 @@ import type {Organization} from 'sentry/types/organization';
 import {isActiveSuperuser} from 'sentry/utils/isActiveSuperuser';
 import {Oxfordize} from 'sentry/utils/oxfordizeArray';
 import {promptIsDismissed} from 'sentry/utils/promptIsDismissed';
+import {useInvertedTheme} from 'sentry/utils/theme/useInvertedTheme';
 import normalizeUrl from 'sentry/utils/url/normalizeUrl';
 import {useNavigate} from 'sentry/utils/useNavigate';
 import withApi from 'sentry/utils/withApi';
@@ -1151,7 +1153,7 @@ class GSBanner extends Component<Props, State> {
                     updateUrl: (
                       <LinkButton
                         to={billingUrl}
-                        size="xs"
+                        size="zero"
                         priority="default"
                         aria-label={t('Update payment information')}
                         onClick={addButtonAnalytics}
@@ -1165,7 +1167,7 @@ class GSBanner extends Component<Props, State> {
                     updateUrl: (
                       <LinkButton
                         to={membersPageUrl}
-                        size="xs"
+                        size="zero"
                         priority="default"
                         aria-label={t('Org Owner or Billing Member')}
                         onClick={addButtonAnalytics}
@@ -1262,8 +1264,21 @@ export default withPromotions(withApi(withSubscription(GSBanner, {noLoader: true
 
 // XXX: We have no alert types with this styling, but for now we would like for
 // it to be differentiated.
-const BannerAlert = styled(Alert)`
+const StyledBannerAlert = styled(Alert)`
   color: ${p => p.theme.headerBackground};
-  background-color: ${p => p.theme.bannerBackground};
+  background-color: ${p => p.theme.gray500};
   border: none;
 `;
+
+function BannerAlert(props: AlertProps) {
+  const invertedTheme = useInvertedTheme();
+
+  if (invertedTheme.isChonk) {
+    return (
+      <ThemeProvider theme={invertedTheme}>
+        <Alert {...props} />
+      </ThemeProvider>
+    );
+  }
+  return <StyledBannerAlert {...props} />;
+}