do not return undefined colors when splitting brand

fixes #13369

Author: gordonwoodhull

news/changelog-1.8.md

@@ -2,6 +2,7 @@
 
 ## In this release
 
+- ([#13369](https://github.com/quarto-dev/quarto-cli/issues/13369)): Fix failure in theme compilation when `brand.color.primary` is specified for light or dark but not both.
 - ([#13383](https://github.com/quarto-dev/quarto-cli/issues/13383)): Fix failure when combining `minimal: true` with brand.yml.
 - ([#13396](https://github.com/quarto-dev/quarto-cli/issues/13396)): Fix `quarto publish connect` regression.
 - ([#13418](https://github.com/quarto-dev/quarto-cli/issues/13418)): Resolve logo paths specified directly in `brand.logo.{size}`.

src/core/brand/brand.ts

@@ -675,42 +675,44 @@ export function splitUnifiedBrand(
         ? typography.headings
         : {
           ...typography.headings,
-          color: headingsColor && headingsColor[mode],
+          ...(headingsColor?.[mode] && { color: headingsColor[mode] }),
         },
       monospace:
         !typography.monospace || typeof typography.monospace === "string"
           ? typography.monospace
           : {
             ...typography.monospace,
-            color: monospaceColor && monospaceColor[mode],
-            "background-color": monospaceBackgroundColor &&
-              monospaceBackgroundColor[mode],
+            ...(monospaceColor?.[mode] && { color: monospaceColor[mode] }),
+            ...(monospaceBackgroundColor?.[mode] &&
+              { "background-color": monospaceBackgroundColor[mode] }),
           },
       "monospace-inline": !typography["monospace-inline"] ||
           typeof typography["monospace-inline"] === "string"
         ? typography["monospace-inline"]
         : {
           ...typography["monospace-inline"],
-          color: monospaceInlineColor && monospaceInlineColor[mode],
-          "background-color": monospaceInlineBackgroundColor &&
-            monospaceInlineBackgroundColor[mode],
+          ...(monospaceInlineColor?.[mode] &&
+            { color: monospaceInlineColor[mode] }),
+          ...(monospaceInlineBackgroundColor?.[mode] &&
+            { "background-color": monospaceInlineBackgroundColor[mode] }),
         },
       "monospace-block": !typography["monospace-block"] ||
           typeof typography["monospace-block"] === "string"
         ? typography["monospace-block"]
         : {
           ...typography["monospace-block"],
-          color: monospaceBlockColor && monospaceBlockColor[mode],
-          "background-color": monospaceBlockBackgroundColor &&
-            monospaceBlockBackgroundColor[mode],
+          ...(monospaceBlockColor?.[mode] &&
+            { color: monospaceBlockColor[mode] }),
+          ...(monospaceBlockBackgroundColor?.[mode] &&
+            { "background-color": monospaceBlockBackgroundColor[mode] }),
         },
       link: !typography.link || typeof typography.link === "string"
         ? typography.link
         : {
           ...typography.link,
-          color: linkColor && linkColor[mode],
-          "background-color": linkBackgroundColor &&
-            linkBackgroundColor[mode],
+          ...(linkColor?.[mode] && { color: linkColor[mode] }),
+          ...(linkBackgroundColor?.[mode] &&
+            { "background-color": linkBackgroundColor[mode] }),
         },
     };
   const logos = unifiedBrand.logo && splitLogo(unifiedBrand.logo);
@@ -733,10 +735,12 @@ export function splitUnifiedBrand(
       if (!unifiedBrand.color[colorName]) {
         continue;
       }
-      ({
-        light: lightBrand.color![colorName],
-        dark: darkBrand.color![colorName],
-      } = splitColorLightDark(unifiedBrand.color![colorName]));
+      const { light, dark } = splitColorLightDark(
+        unifiedBrand.color[colorName],
+      );
+
+      if (light !== undefined) lightBrand.color![colorName] = light;
+      if (dark !== undefined) darkBrand.color![colorName] = dark;
     }
   }
   return {

src/core/sass/brand.ts

@@ -165,7 +165,7 @@ const fileFontImportString = (brand: Brand, description: BrandFontFile) => {
     }
     parts.push(`@font-face {
     font-family: '${description.family}';
-    src: url('${join(pathPrefix, path).replace(/\\/g, '/')}');
+    src: url('${join(pathPrefix, path).replace(/\\/g, "/")}');
     font-weight: ${weight || "normal"};
     font-style: ${style || "normal"};
 }\n`);

tests/docs/smoke-all/brand/color/background-light-only.qmd

@@ -0,0 +1,21 @@
+---
+title: primary only
+brand:
+  color:
+    background:
+      light: '#f3f3f8'
+    foreground:
+      light: '#0f0412'
+      dark: '#f8f8f8'
+_quarto:
+  tests: 
+    html:
+      printsMessage:
+        level: WARN
+        regex: '"[a-z]*" is not a valid CSS color name'
+        negate: true
+---
+
+---
+
+Here is some text [with a link](https://example.com).

tests/docs/smoke-all/brand/color/foreground-dark-only.qmd

@@ -0,0 +1,21 @@
+---
+title: primary only
+brand:
+  color:
+    background:
+      light: '#f3f3f8'
+      dark: '#0f0412'
+    foreground:
+      dark: '#f8f8f8'
+_quarto:
+  tests: 
+    html:
+      printsMessage:
+        level: WARN
+        regex: '"[a-z]*" is not a valid CSS color name'
+        negate: true
+---
+
+---
+
+Here is some text [with a link](https://example.com).

tests/docs/smoke-all/brand/color/primary-dark-only.qmd

@@ -0,0 +1,22 @@
+---
+title: primary only
+brand:
+  color:
+    background:
+      light: '#f3f3f8'
+      dark: '#0f0412'
+    foreground:
+      light: '#113322'
+      dark: '#f8f8f8'
+    primary:
+      dark: '#20bbff'
+_quarto:
+  tests: 
+    html:
+      printsMessage:
+        level: WARN
+        regex: '"[a-z]*" is not a valid CSS color name'
+        negate: true
+---
+
+Here is some text [with a link](https://example.com).