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

GitOrigin-RevId: 4c7b8fc0493b448fd565ac8b8521ee1777e60202
This commit is contained in:
Mathias Jakobsen
2026-05-07 08:08:41 +00:00
committed by Copybot
parent 76fbb56107
commit 0d40b7aca0
2 changed files with 23 additions and 1 deletions
@@ -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;
}