dark logo: sidebar and navbar

rename functions unified -> having dark
use Zod to reify enumerations

unified and simple brand logo

brand metadata now only contains one polarity of logo
since we split the unified logo immediately

unfortunate consequence of dark sidebar logo: the dreaded !important css
bootstrap started it

normalize and resolve all document- and project- provided logos to LightDarkLogo

Author: gordonwoodhull

src/core/brand/brand.ts

@@ -10,57 +10,36 @@ import {
   BrandColorLightDark,
   BrandFont,
   BrandLogoExplicitResource,
+  BrandLogoSingle,
+  BrandLogoUnified,
+  BrandNamedLogo,
   BrandNamedThemeColor,
   BrandSingle,
+  BrandStringLightDark,
   BrandTypographyOptionsBase,
   BrandTypographyOptionsHeadingsSingle,
   BrandTypographySingle,
   BrandTypographyUnified,
   BrandUnified,
+  LogoLightDarkSpecifier,
+  LogoOptions,
+  NormalizedLogoLightDarkSpecifier,
   Zod,
 } from "../../resources/types/zod/schema-types.ts";
 import { InternalError } from "../lib/error.ts";
 
 import { join, relative } from "../../deno_ral/path.ts";
 import { warnOnce } from "../log.ts";
 import { isCssColorName } from "../css/color-names.ts";
-
-// we can't programmatically convert typescript types to string arrays,
-// so we have to define this manually. They should match `BrandNamedThemeColor` in schema-types.ts
-
-export const defaultColorNames: BrandNamedThemeColor[] = [
-  "foreground",
-  "background",
-  "primary",
-  "secondary",
-  "tertiary",
-  "success",
-  "info",
-  "warning",
-  "danger",
-  "light",
-  "dark",
-  "link",
-];
-
-const defaultLogoNames: string[] = [
-  "small",
-  "medium",
-  "large",
-];
-
-type CanonicalLogoInfo = {
-  light: BrandLogoExplicitResource;
-  dark: BrandLogoExplicitResource;
-};
+import { assert } from "testing/asserts";
 
 type ProcessedBrandData = {
   color: Record<string, string>;
   typography: BrandTypographySingle;
   logo: {
-    small?: CanonicalLogoInfo;
-    medium?: CanonicalLogoInfo;
-    large?: CanonicalLogoInfo;
+    small?: BrandLogoExplicitResource;
+    medium?: BrandLogoExplicitResource;
+    large?: BrandLogoExplicitResource;
     images: Record<string, BrandLogoExplicitResource>;
   };
 };
@@ -156,11 +135,7 @@ export class Brand {
 
     const logo: ProcessedBrandData["logo"] = { images: {} };
     for (
-      const size of [
-        "small",
-        "medium",
-        "large",
-      ] as ("small" | "medium" | "large")[]
+      const size of Zod.BrandNamedLogo.options
     ) {
       const v = this.getLogo(size);
       if (v) {
@@ -203,7 +178,9 @@ export class Brand {
       if (this.data.color?.palette?.[name]) {
         name = this.data.color.palette[name] as string;
       } else if (
-        defaultColorNames.includes(name as BrandNamedThemeColor) &&
+        Zod.BrandNamedThemeColor.options.includes(
+          name as BrandNamedThemeColor,
+        ) &&
         this.data.color?.[name as BrandNamedThemeColor]
       ) {
         name = this.data.color[name as BrandNamedThemeColor]!;
@@ -278,30 +255,12 @@ export class Brand {
     };
   }
 
-  getLogo(name: "small" | "medium" | "large"): CanonicalLogoInfo | undefined {
+  getLogo(name: BrandNamedLogo): BrandLogoExplicitResource | undefined {
     const entry = this.data.logo?.[name];
     if (!entry) {
       return undefined;
     }
-    if (typeof entry === "string") {
-      const res = this.getLogoResource(entry);
-      return {
-        light: res,
-        dark: res,
-      };
-    }
-    const lightEntry = entry?.light
-      ? this.getLogoResource(entry.light)
-      : undefined;
-    const darkEntry = entry?.dark
-      ? this.getLogoResource(entry.dark)
-      : undefined;
-    if (lightEntry && darkEntry) {
-      return {
-        light: lightEntry,
-        dark: darkEntry,
-      };
-    }
+    return this.getLogoResource(entry);
   }
 }
 
@@ -320,9 +279,66 @@ export const getFavicon = (brand: Brand): string | undefined => {
   if (!logoInfo) {
     return undefined;
   }
-  return logoInfo.light.path;
+  return logoInfo.path;
 };
 
+export async function normalizeLogoSpec(
+  brand: LightDarkBrand | undefined,
+  spec: LogoLightDarkSpecifier,
+): Promise<NormalizedLogoLightDarkSpecifier> {
+  const resolveLogo = (mode: "light" | "dark", name: string) => {
+    const logo = brand?.[mode]?.processedData?.logo;
+    return logo &&
+      ((Zod.BrandNamedLogo.options.includes(name as BrandNamedLogo) &&
+        logo[name as BrandNamedLogo]) || logo.images[name]);
+  };
+  const resolveLogoOptions = (
+    mode: "light" | "dark",
+    logo: LogoOptions,
+  ): LogoOptions => {
+    const logo2 = resolveLogo(mode, logo.path);
+    if (logo2) {
+      const { path: _, ...rest } = logo;
+      return {
+        ...logo2,
+        ...rest,
+      };
+    }
+    return logo;
+  };
+  if (typeof spec === "string") {
+    return {
+      light: resolveLogo("light", spec) || { path: spec },
+      dark: resolveLogo("light", spec) || { path: spec },
+    };
+  }
+  if ("path" in spec) {
+    return {
+      light: resolveLogoOptions("light", spec),
+      dark: resolveLogoOptions("dark", spec),
+    };
+  }
+  let light, dark;
+  if (spec.light) {
+    if (typeof spec.light === "string") {
+      light = resolveLogo("light", spec.light) || { path: spec.light };
+    } else {
+      light = resolveLogoOptions("light", spec.light);
+    }
+  }
+  if (spec.dark) {
+    if (typeof spec.dark === "string") {
+      dark = resolveLogo("dark", spec.dark) || { path: spec.dark };
+    } else {
+      dark = resolveLogoOptions("dark", spec.dark);
+    }
+  }
+  return {
+    light,
+    dark,
+  };
+}
+
 function splitColorLightDark(
   bcld: BrandColorLightDark,
 ): LightDarkColor {
@@ -331,42 +347,55 @@ function splitColorLightDark(
   }
   return bcld;
 }
-function colorIsUnified(blcd: BrandColorLightDark) {
-  return typeof blcd === "object" && "dark" in blcd;
-}
-export function brandIsUnified(brand: BrandUnified): boolean {
+
+const enablesDarkMode = (x: BrandColorLightDark | BrandStringLightDark) =>
+  typeof x === "object" && x?.dark;
+
+export function brandHasDarkMode(brand: BrandUnified): boolean {
   if (brand.color) {
     for (const colorName of Zod.BrandNamedThemeColor.options) {
       if (!brand.color[colorName]) {
         continue;
       }
-      if (colorIsUnified(brand.color![colorName])) {
+      if (enablesDarkMode(brand.color![colorName])) {
         return true;
       }
     }
   }
   if (brand.typography) {
     for (const elementName of Zod.BrandNamedTypographyElements.options) {
-      const element = brand.typography![elementName];
+      const element = brand.typography[elementName];
       if (!element || typeof element === "string") {
         continue;
       }
       if (
         "background-color" in element && element["background-color"] &&
-        colorIsUnified(element["background-color"])
+        enablesDarkMode(element["background-color"])
       ) {
         return true;
       }
       if (
         "color" in element && element["color"] &&
-        colorIsUnified(element["color"])
+        enablesDarkMode(element["color"])
       ) {
         return true;
       }
     }
   }
+  if (brand.logo) {
+    for (const logoName of Zod.BrandNamedLogo.options) {
+      const logo = brand.logo[logoName];
+      if (!logo || typeof logo === "string") {
+        continue;
+      }
+      if (enablesDarkMode(logo)) {
+        return true;
+      }
+    }
+  }
   return false;
 }
+
 function sharedTypography(
   unified: BrandTypographyUnified,
 ): BrandTypographySingle {
@@ -389,6 +418,25 @@ function sharedTypography(
   }
   return ret;
 }
+
+function splitLogo(
+  unifiedLogo: BrandLogoUnified,
+): { light: BrandLogoSingle; dark: BrandLogoSingle } {
+  const light: BrandLogoSingle = { images: unifiedLogo.images },
+    dark: BrandLogoSingle = { images: unifiedLogo.images };
+  for (const logoName of Zod.BrandNamedLogo.options) {
+    if (unifiedLogo[logoName]) {
+      if (typeof unifiedLogo[logoName] === "string") {
+        light[logoName] = dark[logoName] = unifiedLogo[logoName];
+        continue;
+      }
+      ({ light: light[logoName], dark: dark[logoName] } =
+        unifiedLogo[logoName]);
+    }
+  }
+  return { light, dark };
+}
+
 export function splitUnifiedBrand(
   unified: unknown,
   brandDir: string,
@@ -528,18 +576,19 @@ export function splitUnifiedBrand(
             linkBackgroundColor[mode],
         },
     };
+  const logos = unifiedBrand.logo && splitLogo(unifiedBrand.logo);
   const lightBrand: BrandSingle = {
     meta: unifiedBrand.meta,
     color: { palette: unifiedBrand.color && { ...unifiedBrand.color.palette } },
     typography: typography && specializeTypography(typography, "light"),
-    logo: unifiedBrand.logo,
+    logo: logos && logos.light,
     defaults: unifiedBrand.defaults,
   };
   const darkBrand: BrandSingle = {
     meta: unifiedBrand.meta,
     color: { palette: unifiedBrand.color && { ...unifiedBrand.color.palette } },
     typography: typography && specializeTypography(typography, "dark"),
-    logo: unifiedBrand.logo,
+    logo: logos && logos.dark,
     defaults: unifiedBrand.defaults,
   };
   if (unifiedBrand.color) {
@@ -555,7 +604,7 @@ export function splitUnifiedBrand(
   }
   return {
     light: new Brand(lightBrand, brandDir, projectDir),
-    dark: brandIsUnified(unifiedBrand)
+    dark: brandHasDarkMode(unifiedBrand)
       ? new Brand(darkBrand, brandDir, projectDir)
       : undefined,
   };

src/format/reveal/format-reveal.ts

@@ -25,6 +25,8 @@ import {
   Metadata,
   PandocFlags,
 } from "../../config/types.ts";
+import { BrandNamedLogo, Zod } from "../../resources/types/zod/schema-types.ts";
+
 import { mergeConfigs } from "../../core/config.ts";
 import { formatResourcePath } from "../../core/resources.ts";
 import { renderEjs } from "../../core/ejs.ts";
@@ -377,18 +379,14 @@ export function revealjsFormat() {
 const determineRevealLogo = (format: Format): string | undefined => {
   const brandData = format.render.brand?.light?.processedData;
   if (brandData?.logo) {
-    const keys: ("medium" | "small" | "large")[] = ["medium", "small", "large"];
     // add slide logo if we have one
-    for (const size of keys) {
+    for (const size of Zod.BrandNamedLogo.options) {
       const logoInfo = brandData.logo[size];
       if (!logoInfo) {
         continue;
       }
-      if (typeof logoInfo === "string") {
-        return logoInfo;
-      } else {
-        // what to do about light vs dark?
-        return logoInfo?.light.path ?? logoInfo?.dark.path;
+      if (logoInfo) {
+        return logoInfo.path;
       }
     }
   }
@@ -403,14 +401,12 @@ function revealMarkdownAfterBody(format: Format) {
     if (typeof revealLogo === "object") {
       revealLogo = revealLogo.path;
     }
-    if (["small", "medium", "large"].includes(revealLogo)) {
+    if (Zod.BrandNamedLogo.options.includes(revealLogo as BrandNamedLogo)) {
       const brandData = format.render.brand?.light?.processedData;
       const logoInfo = brandData?.logo
-        ?.[revealLogo as ("medium" | "small" | "large")];
-      if (typeof logoInfo === "string") {
-        revealLogo = logoInfo;
-      } else {
-        revealLogo = logoInfo?.light.path ?? logoInfo?.dark.path;
+        ?.[revealLogo as BrandNamedLogo];
+      if (logoInfo) {
+        revealLogo = logoInfo.path;
       }
     }
   } else {

src/project/types.ts

@@ -14,6 +14,7 @@ import { ExecutionEngine, ExecutionTarget } from "../execute/types.ts";
 import { InspectedMdCell } from "../inspect/inspect-types.ts";
 import { NotebookContext } from "../render/notebook/notebook-types.ts";
 import {
+  LogoLightDarkSpecifier,
   NavigationItem as NavItem,
   NavigationItemObject,
   NavigationItemObject as SidebarTool,
@@ -151,7 +152,7 @@ export const kSidebarMenus = "sidebar-menus";
 
 export interface Navbar {
   title?: string | false;
-  logo?: string;
+  logo?: LogoLightDarkSpecifier;
   [kLogoAlt]?: string;
   [kLogoHref]?: string;
   background:
@@ -197,7 +198,7 @@ export interface Sidebar {
   id?: string;
   title?: string;
   subtitle?: string;
-  logo?: string;
+  logo?: LogoLightDarkSpecifier;
   [kLogoAlt]?: string;
   [kLogoHref]?: string;
   alignment?: "left" | "right" | "center";