vndangkhoa/open-design
1
0
Fork 0
mirror of https://github.com/nexu-io/open-design.git synced 2026-06-01 03:14:35 +07:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

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

Browse source 
* 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>
This commit is contained in:
xinsngx 2026-05-30 11:53:42 +08:00 committed by GitHub
parent 610aac4cc5
commit 778010bcf9
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 69 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
apps/web/src/styles/home/home-hero.css
View file

@ -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;

49
apps/web/tests/styles/home-hero-select-theme.test.ts Normal file
View file

@ -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`,
);
}
});
});