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:
1 parent
4b18d68389
commit
37ed85bf42
2 files changed
+25
-1
No files matched your search
@@ -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'));
|
||||
});
|
||||
});
|
||||
Reference in new issue
Block a user