Design and slide tools

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,  };}

brand-swatch.js

/** The brand's main colour and a text colour that reads on it. */export function brandSwatch(brand) {  const main = brand.colors.find((c) => c.role === 'primary') ?? brand.colors[0];  if (!main) return null; // no colours: keep your own  return { background: main.hex, text: readableOn(main.hex), source: brand.colorsSource };}/** White or near-black, whichever contrasts more with `hex` (WCAG). */function readableOn(hex) {  const [r, g, b] = [1, 3, 5].map((i) => {    const c = parseInt(hex.slice(i, i + 2), 16) / 255;    return c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;  });  const l = 0.2126 * r + 0.7152 * g + 0.0722 * b;  return 1.05 / (l + 0.05) >= (l + 0.05) / 0.05 ? '#ffffff' : '#111111';}