fix(navbar): logo on a stored light bar follows the link text in the editor

Legacy Navbar nodes store backgroundColor '#ffffff' + textColor '#3f3f46'; the
editor took the logo colour from the Site Design text (light on a dark design)
while the export already uses logoColor || textCol. Same dark-palette class as
finding 8.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
shadowdaoandClaude Opus 5.5 committed 2026-10-07 13:22:22 -07:00
1 parent 4b18d68389
commit 37ed85bf42
2 files changed
+25 -1

No files matched your search

+4 -1
View File
@@ -94,8 +94,11 @@ export const Navbar: UserComponent<NavbarProps> = ({
// background); legacy stored hex values keep the old hex test. White/zinc on
// an explicitly dark bar is "text on a dark custom colour" -- no token fits.
const lightBg = isLightNavBg(backgroundColor);
const resolvedLogoColor = logoColor || (lightBg ? design.textColor : '#ffffff');
const resolvedTextColor = textColor || (lightBg ? tokenRef('text') : '#e4e4e7');
// A STORED light hex bar (legacy nodes: '#ffffff' + textColor '#3f3f46') must not
// take the logo colour from the Site Design text, which is light on a dark design;
// follow the link text, exactly as toHtml does (`logoColor || textCol`).
const resolvedLogoColor = logoColor || (isLightColor(backgroundColor) ? resolvedTextColor : lightBg ? design.textColor : '#ffffff');
const [hoveredLink, setHoveredLink] = useState<number | null>(null);
const [openDropdown, setOpenDropdown] = useState<number | null>(null);
@@ -209,3 +209,24 @@ describe('Testimonials: legacy light cardBg keeps dark card text', () => {
},
);
});
/* ---------------- Navbar (legacy nodes store textColor '#3f3f46') ---------------- */
describe('Navbar: legacy stored light bar stays readable on a dark palette', () => {
const legacy = { backgroundColor: '#ffffff', textColor: '#3f3f46', logoText: 'Brand', links: [{ label: 'Home', href: '/' }] };
test('export: links and logo use the stored dark text', () => {
const root = exportDark('Navbar', legacy);
const anchors = Array.from(root.querySelectorAll('nav a')) as HTMLElement[];
expect(anchors.length).toBeGreaterThan(0);
expect(anchors.map((a) => a.style.color).filter(Boolean).every((c) => c === rgb('#3f3f46'))).toBe(true);
});
test('editor: the logo follows the stored dark text, not the (light) Site Design text colour', () => {
const c = renderInEditor('Navbar', legacy, ['logoColor']);
const nav = c.querySelector('nav')!;
const logo = Array.from(nav.querySelectorAll('*')).find((el) => el.textContent === 'Brand' && (el as HTMLElement).style.color) as HTMLElement;
expect(logo).toBeTruthy();
expect(logo.style.color).toBe(rgb('#3f3f46'));
});
});