feat(site-builder): tokenise remaining component design colours (Navbar, Menu, Footer, SocialLinks, StickyCallBar, BackgroundSection, ContentSlider, Countdown, HeroSimple)

Refs #44

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

craft/src/components/basic/Navbar.tsx

@@ -53,6 +53,11 @@ const PADDING_PRESETS = [
   { label: 'Spacious', value: '24px 48px' },
 ];
 
+function isLightNavBg(bg: string): boolean {
+  const v = (bg || '').trim().toLowerCase();
+  return v === tokenRef('bg') || v === '#ffffff' || v === '#f8fafc' || v === '#f9fafb';
+}
+
 /* ---------- Component ---------- */
 
 export const Navbar: UserComponent<NavbarProps> = ({
@@ -65,11 +70,11 @@ export const Navbar: UserComponent<NavbarProps> = ({
   logoFontSize = '20px',
   logoColor,
   links = defaultLinks,
-  backgroundColor = '#ffffff',
-  textColor = '#3f3f46',
+  backgroundColor = tokenRef('bg'),
+  textColor = tokenRef('text'),
   hoverColor = tokenRef('primary'),
   ctaColor = tokenRef('primary'),
-  ctaTextColor = '#ffffff',
+  ctaTextColor = tokenRef('bg'),
   padding = '16px 24px',
   navAlignment = 'space-between',
   isSticky = false,
@@ -84,8 +89,12 @@ export const Navbar: UserComponent<NavbarProps> = ({
   }));
 
   const { design } = useSiteDesign();
-  const resolvedLogoColor = logoColor || (backgroundColor === '#ffffff' || backgroundColor === '#f8fafc' || backgroundColor === '#f9fafb' ? design.textColor : '#ffffff');
-  const resolvedTextColor = textColor || (backgroundColor === '#ffffff' || backgroundColor === '#f8fafc' || backgroundColor === '#f9fafb' ? '#3f3f46' : '#e4e4e7');
+  // Light-background heuristic: the bg token counts as light (it is the page
+  // 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');
 
   const [hoveredLink, setHoveredLink] = useState<number | null>(null);
   const [openDropdown, setOpenDropdown] = useState<number | null>(null);
@@ -225,17 +234,17 @@ Navbar.craft = {
     logoColor: undefined,
     links: defaultLinks,
     followPages: false,
-    backgroundColor: '#ffffff',
-    textColor: '#3f3f46',
+    backgroundColor: tokenRef('bg'),
+    textColor: tokenRef('text'),
     hoverColor: tokenRef('primary'),
     ctaColor: tokenRef('primary'),
-    ctaTextColor: '#ffffff',
+    ctaTextColor: tokenRef('bg'),
     padding: '16px 24px',
     navAlignment: 'space-between',
     isSticky: false,
     showMobileMenu: false,
     style: {
-      borderBottom: '1px solid #e4e4e7',
+      borderBottom: `1px solid ${tokenRef('border')}`,
     },
     hideOnDesktop: false,
     hideOnTablet: false,
@@ -256,11 +265,11 @@ Navbar.craft = {
   // Sanitized once here -- these are raw string-interpolation sinks below
   // (hoverCol/bgColor go into a <style> block, the worst case: </style>
   // breakout -> arbitrary <script>), see task-cssxss-brief.md.
-  const bgColor = cssValue(props.backgroundColor) || '#ffffff';
-  const textCol = cssValue(props.textColor) || '#3f3f46';
+  const bgColor = cssValue(props.backgroundColor) || tokenRef('bg');
+  const textCol = cssValue(props.textColor) || tokenRef('text');
   const hoverCol = cssValue(props.hoverColor) || tokenRef('primary');
   const ctaCol = cssValue(props.ctaColor) || tokenRef('primary');
-  const ctaTextCol = cssValue(props.ctaTextColor) || '#ffffff';
+  const ctaTextCol = cssValue(props.ctaTextColor) || tokenRef('bg');
   const pad = cssValue(props.padding) || '16px 24px';
   const alignment = props.navAlignment || 'space-between';
   const sticky = props.isSticky;