Dark mode for project list survey (#30619)

* feat: add dark mode for project list survey

* theming hover states on buttons

* feat: move theming to re-useable mixin

GitOrigin-RevId: ed85d050e908ae13d97ee8d67cf74e00c27fc258

services/web/frontend/stylesheets/abstracts/mixins.scss

@@ -75,6 +75,39 @@
   );
 }
 
+// util for creating the base themes for each button, only usable when scoped to -themed available classes
+// currently only primary and secondary buttons implemented
+// todo: once all button types have matching light/dark designs, remove mixin and implement in buttons.scss
+@mixin ol-button-themed($variant) {
+  // primary button remains the same in both dark and light
+  @if $variant == 'primary' {
+    @include ol-button-variant(
+      $color: var(--content-primary-dark),
+      $background: var(--bg-accent-01),
+      $hover-background: var(--bg-accent-02),
+      $hover-border: var(--bg-accent-02)
+    );
+  } @else if $variant == 'secondary' {
+    @include ol-button-variant(
+      $color: var(--content-primary-themed),
+      $background: var(--bg-primary-themed),
+      $border: var(--border-primary-themed),
+      $hover-background: var(--bg-secondary-themed),
+      $hover-border: var(--border-hover-themed),
+      $borderless: false
+    );
+  } @else {
+    @include ol-button-variant(
+      $color: var(--content-primary-themed),
+      $background: var(--bg-primary-themed),
+      $border: var(--border-primary-themed),
+      $hover-background: var(--bg-secondary-themed),
+      $hover-border: var(--border-hover-themed),
+      $borderless: false
+    );
+  }
+}
+
 @mixin reset-button() {
   padding: 0;
   cursor: pointer;

services/web/frontend/stylesheets/abstracts/themes-common-variables.scss

@@ -1,4 +1,5 @@
 /* ====== Semantic CSS color variables that adjust depending on the current theme ====== */
+
 :root {
   --editor-border-color: var(--neutral-80);
   --bg-primary-themed: var(--bg-dark-primary);

services/web/frontend/stylesheets/pages/project-list-ds-nav.scss

@@ -153,8 +153,8 @@ body {
       }
 
       .survey-notification {
-        background-color: var(--bg-light-secondary);
-        color: var(--content-secondary);
+        background-color: var(--bg-secondary-themed);
+        color: var(--content-secondary-themed);
         box-shadow: none;
         border-radius: var(--border-radius-large);
         position: relative;
@@ -169,6 +169,12 @@ body {
           color: inherit;
         }
 
+        .notification-body {
+          .btn {
+            @include ol-button-themed('secondary');
+          }
+        }
+
         p {
           margin-bottom: var(--spacing-03);
         }