Logos

logo-for.js

/** * The file to show on a light or dark ground: one made for that ground if the * brand has it, else its primary logo, with whether that needs a tile behind it. */export function logoFor(brand, ground /* 'light' | 'dark' */) {  const version = brand.currentVersion;  if (!version) return null;  const files = version.variants.filter((v) => v.asset?.url);  const forGround = files.find((v) => v.colorMode === ground);  const primary = files.find((v) => v.role === 'primary');  const asset = (forGround ?? primary)?.asset ?? version.logo;  if (!asset) return null;  return {    src: asset.url,                 // the original, usually SVG    small: asset.thumbnailUrl,      // WebP, 256 on its longer side    width: asset.width,             // null for a vector without a size    height: asset.height,    // A primary drawn for dark grounds, shown on a light page, needs a dark tile.    tile: !forGround && primary?.colorMode === 'dark' ? 'dark' : null,  };}

function brandMark(brand, ground) {  const logo = logoFor(brand, ground);  if (logo) {    const img = document.createElement('img');    img.src = logo.small ?? logo.src;    img.alt = brand.name.ar;    img.loading = 'lazy';    return img;  }  // No logo yet: the name, never a made-up mark.  const name = document.createElement('span');  name.textContent = brand.name.ar;  return name;}