fix(web): theme home hero select menu (#3309)

* fix(web): theme home hero select menu

Use theme tokens for HomeHero footer select dropdown panels so dark theme menus do not render light-only white backgrounds with low-contrast text.

Agent-Model: gpt-5

Agent-Family: openai

Agent-Session: 019e6ceb-c33d-7cd3-bff0-cbc20c642197

Agent-Step: 0.0.3

* test(web): cover dark model logo inversion

Agent-Model: gpt-5
Agent-Family: openai
Agent-Session: 019e6ceb-c33d-7cd3-bff0-cbc20c642197
Agent-Step: 0.0.7

---------

Co-authored-by: Codex <gpt-5@openai.com>

apps/web/src/styles/home/home-hero.css

@@ -1272,7 +1272,7 @@
   padding: 6px;
   border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
   border-radius: 13px;
-  background: #fff;
+  background: color-mix(in srgb, var(--bg-panel) 98%, var(--bg-subtle) 2%);
   box-shadow: 0 18px 44px rgba(15, 23, 42, 0.16), 0 1px 2px rgba(15, 23, 42, 0.08);
   isolation: isolate;
 }
@@ -1299,7 +1299,7 @@
   top: 0;
   z-index: 1;
   padding-bottom: 8px;
-  background: #fff;
+  background: color-mix(in srgb, var(--bg-panel) 98%, var(--bg-subtle) 2%);
 }
 .home-hero__footer-option--select[data-field-name='designSystem'] .home-hero__footer-select-search {
   margin: 0;
@@ -1311,7 +1311,7 @@
   height: 42px;
   border: 1px solid color-mix(in srgb, var(--border) 90%, transparent);
   border-radius: 10px;
-  background: #fff;
+  background: var(--bg-panel);
   color: var(--text);
   font: inherit;
   font-size: 14px;
@@ -1335,7 +1335,7 @@
 .home-hero__footer-select-search input:focus {
   border-color: color-mix(in srgb, var(--accent) 42%, var(--border));
   box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 10%, transparent);
-  background: #fff;
+  background: var(--bg-panel);
 }
 .home-hero__footer-option--select[data-field-name='designSystem'] .home-hero__footer-select-search input:focus {
   border-color: color-mix(in srgb, var(--accent) 50%, var(--border));
@@ -1625,6 +1625,22 @@
 .home-hero__model-option-icon--custom {
   color: var(--text-muted);
 }
+[data-theme="dark"] .home-hero__model-option-icon--openai img,
+[data-theme="dark"] .home-hero__model-option-icon--dalle img,
+[data-theme="dark"] .home-hero__model-option-icon--grok img,
+[data-theme="dark"] .home-hero__model-option-icon--elevenlabs img,
+[data-theme="dark"] .home-hero__model-option-icon--suno img {
+  filter: invert(1) brightness(1.2);
+}
+@media (prefers-color-scheme: dark) {
+  html:not([data-theme="light"]) .home-hero__model-option-icon--openai img,
+  html:not([data-theme="light"]) .home-hero__model-option-icon--dalle img,
+  html:not([data-theme="light"]) .home-hero__model-option-icon--grok img,
+  html:not([data-theme="light"]) .home-hero__model-option-icon--elevenlabs img,
+  html:not([data-theme="light"]) .home-hero__model-option-icon--suno img {
+    filter: invert(1) brightness(1.2);
+  }
+}
 .home-hero__ratio-option-icon {
   width: 26px;
   height: 26px;

apps/web/tests/styles/home-hero-select-theme.test.ts

@@ -0,0 +1,49 @@
+import { readFileSync } from 'node:fs';
+import { describe, expect, it } from 'vitest';
+
+const homeHeroCss = readFileSync(new URL('../../src/styles/home/home-hero.css', import.meta.url), 'utf8');
+
+function cssDeclarations(selector: string): string {
+  const blocks: string[] = [];
+  const rulePattern = /([^{}]+)\{([^}]*)\}/g;
+  let match: RegExpExecArray | null;
+  while ((match = rulePattern.exec(homeHeroCss)) !== null) {
+    const selectors = (match[1] ?? '').split(',').map((item) => item.trim());
+    if (selectors.includes(selector)) blocks.push(match[2] ?? '');
+  }
+  if (blocks.length === 0) throw new Error(`Missing CSS block for ${selector}`);
+  return blocks.join('\n');
+}
+
+function ruleValue(block: string, property: string): string {
+  const matches = [...block.matchAll(new RegExp(`(?:^|[;\\n])\\s*${property}:\\s*([^;]+);`, 'g'))];
+  const match = matches.at(-1);
+  if (!match) throw new Error(`Missing CSS property ${property}`);
+  return match[1]!.trim();
+}
+
+describe('HomeHero footer select theme styles', () => {
+  it('uses theme-aware dropdown backgrounds instead of light-only white panels', () => {
+    for (const selector of [
+      '.home-hero__footer-select-menu',
+      '.home-hero__footer-select-search',
+      '.home-hero__footer-select-search input',
+      '.home-hero__footer-select-search input:focus',
+    ]) {
+      const background = ruleValue(cssDeclarations(selector), 'background');
+      expect(background, selector).not.toBe('#fff');
+      expect(background, selector).toMatch(/var\(--bg-panel\)/);
+    }
+  });
+
+  it('inverts monochrome model logos in dark dropdown panels', () => {
+    for (const icon of ['openai', 'dalle', 'grok', 'elevenlabs', 'suno']) {
+      const selector = `[data-theme="dark"] .home-hero__model-option-icon--${icon} img`;
+      expect(ruleValue(cssDeclarations(selector), 'filter'), selector)
+        .toBe('invert(1) brightness(1.2)');
+      expect(homeHeroCss).toContain(
+        `html:not([data-theme="light"]) .home-hero__model-option-icon--${icon} img`,
+      );
+    }
+  });
+});