[web] Add dark mode variants to AI paywall notifications (#33469)

GitOrigin-RevId: 4c7b8fc0493b448fd565ac8b8521ee1777e60202

services/web/frontend/js/shared/components/ai-paywall-notification.tsx

@@ -91,6 +91,8 @@ function AiPaywallNotification({
           featureLocation === 'workbench' ? chattingMessage : assistMessage
         }
         isDismissible={false}
+        customIcon={null}
+        className="ai-paywall-notification"
       />
     )
   }
@@ -141,7 +143,7 @@ function AiPaywallNotification({
             source={featureLocation}
           />
         }
-        className="ai-upgrade-paywall-btn"
+        className="ai-upgrade-paywall-btn ai-paywall-notification"
       />
     </>
   )
@@ -173,6 +175,7 @@ function GroupsPaywall({
         content={message}
         isDismissible={false}
         customIcon={null}
+        className="ai-paywall-notification"
       />
     </>
   )
@@ -204,6 +207,7 @@ function CommonsPaywall({
         content={message}
         isDismissible={false}
         customIcon={null}
+        className="ai-paywall-notification"
       />
     </>
   )
@@ -243,6 +247,8 @@ function FairUseLimit({
         title={title}
         content={message}
         isDismissible={false}
+        customIcon={null}
+        className="ai-paywall-notification"
       />
     </>
   )

services/web/frontend/stylesheets/components/notifications.scss

@@ -47,6 +47,10 @@
 }
 
 :root {
+  --notification-ai-paywall-background: var(--bg-info-03);
+  --notification-ai-paywall-color: var(--content-primary);
+  --notification-ai-paywall-border-color: var(--blue-60);
+
   @include light-notification;
 
   // Until we roll out dark mode notifications, make sure we show buttons in
@@ -56,6 +60,10 @@
   }
 
   @include theme('default') {
+    --notification-ai-paywall-background: var(--bg-dark-secondary);
+    --notification-ai-paywall-color: var(--content-primary-dark);
+    --notification-ai-paywall-border-color: var(--blue-30);
+
     .project-ds-nav-page {
       .notification {
         @include dark-notification;
@@ -337,3 +345,11 @@
 .form-messages-bottom-margin > :last-child {
   margin-bottom: var(--spacing-06);
 }
+
+.ai-paywall-notification {
+  // Override notification styles. !important is needed so that it binds
+  // stronger than the notification variant styles.
+  border: 2px solid var(--notification-ai-paywall-border-color) !important;
+  background-color: var(--notification-ai-paywall-background) !important;
+  color: var(--notification-ai-paywall-color) !important;
+}