brand logo shortcode: automatic light and dark classes

gordonwoodhull · gordonwoodhull · commit eec03d481cd4 · 2025-07-15T15:09:58.000-04:00
and include both if no brand-mode specified also use alt text from brand logo spec fixes #13004
diff --git a/news/changelog-1.8.md b/news/changelog-1.8.md
@@ -29,6 +29,7 @@ All changes included in 1.8:
 - ([#12797](https://github.com/quarto-dev/quarto-cli/issues/12797)): Allow light and dark brands to be specified in one file, by specializing colors with `light:` and `dark:`.
 - ([#12919](https://github.com/quarto-dev/quarto-cli/issues/12919)): Ensure `kbd` shortcode output has hover tooltip.
 - ([#12981](https://github.com/quarto-dev/quarto-cli/issues/12981)): Brand should be applied in dark mode when dark mode is enabled by the theme, not the brand.
+- ([#13004](https://github.com/quarto-dev/quarto-cli/issues/13004)): Brand logo shortcode automatically applies `.light-content` and `.dark-content` classes, inserts both light and dark logo if brand mode is not specified, and uses alt text from brand logo spec.
 
 ### `revealjs`
 
diff --git a/src/resources/filters/quarto-pre/shortcodes-handlers.lua b/src/resources/filters/quarto-pre/shortcodes-handlers.lua
@@ -127,41 +127,57 @@ function initShortcodeHandlers()
     end
 
     if brandCommand == "logo" then
-      local logo_name = read_arg(args, 2)
-      local brandMode = 'light'
+      local logoName = read_arg(args, 2)
+      local brandMode = 'both'
       if #args > 2 then
         brandMode = read_arg(args, 3) or brandMode
       end
-      local logo_value = brand.get_logo(brandMode, logo_name)
-      local entry = { path = nil }
-
-      if type(logo_value) ~= "table" then
-        warn("unexpected logo value entry: " .. type(logo_value))
-        return warn_bad_brand_command()
+      local lightLogo, darkLogo
+      if brandMode == 'light' or brandMode == 'both' then
+        lightLogo = brand.get_logo('light', logoName) or brand.get_logo('dark', logoName)
+        if lightLogo then
+          if type(lightLogo) ~= "table" then
+            warn("unexpected light logo type: " .. type(lightLogo))
+            return warn_bad_brand_command()
+          end
+          if type(lightLogo.path) ~= "string" then
+            warn("unexpected light logo path type: " .. type(lightLogo.path))
+            return warn_bad_brand_command()
+          end
+        end
       end
-
-      quarto.utils.dump(logo_value)
-
-      -- does this have light/dark variants?
-      -- TODO handle light-dark theme switching
-      if logo_value.light then
-        entry = logo_value.light
-      else
-        entry = logo_value
+      if brandMode == 'dark' or brandMode == 'both' then
+        -- fall back to light logo only if explicit dark logo or dark mode is enabled
+        darkLogo = brand.get_logo('dark', logoName) or 
+          ((brandMode == 'dark' or brand.has_mode('dark')) and brand.get_logo('light', logoName))
+        if darkLogo then
+          if type(darkLogo) ~= "table" then
+            warn("unexpected dark logo type: " .. type(darkLogo))
+            return warn_bad_brand_command()
+          end
+          if type(darkLogo.path) ~= "string" then
+            warn("unexpected dark logo path type: " .. type(darkLogo.path))
+            return warn_bad_brand_command()
+          end
+        end
       end
-
-      if type(entry.path) ~= "string" then
-        warn("unexpected type in logo light entry: " .. type(entry.path))
-        return warn_bad_brand_command()
+      if context == "text" then
+        -- 'both' would not make sense here
+        return lightLogo and lightLogo.path or darkLogo and darkLogo.path
+      end
+      local images = {}
+      if lightLogo then
+        table.insert(images, pandoc.Image(pandoc.Inlines {}, lightLogo.path, "",
+          pandoc.Attr("", {"light-content"}, {alt = lightLogo.alt})))
+      end
+      if darkLogo then
+        table.insert(images, pandoc.Image(pandoc.Inlines {}, darkLogo.path, "",
+          pandoc.Attr("", {"dark-content"}, {alt = darkLogo.alt})))
       end
-
-      -- TODO fix alt text handling
       if context == "block" then
-        return pandoc.Blocks { pandoc.Image(pandoc.Inlines {}, entry.path) }
+        return pandoc.Blocks(images)
       elseif context == "inline" then
-        return pandoc.Inlines { pandoc.Image(pandoc.Inlines {}, entry.path) }
-      elseif context == "text" then
-        return entry.path
+        return pandoc.Inlines(images)
       else
         warn("unexpected context for logo shortcode: " .. context)
         return warn_bad_brand_command()
diff --git a/tests/docs/smoke-all/shortcodes/brand-logo-both.qmd b/tests/docs/smoke-all/shortcodes/brand-logo-both.qmd
@@ -0,0 +1,33 @@
+---
+title: Test brand light/dark shortcodes
+format: html
+brand:
+  light:
+    logo:
+      images:
+        sun: 
+          path: sun.png
+          alt: sun
+      small: sun
+  dark:
+    logo:
+      images:
+        moon:
+          path: moon.png
+          alt: moon
+      small: moon
+_quarto:
+  tests:
+    html:
+      ensureHtmlElements:
+        -
+          - 'img[src="sun.png"][alt="sun"][class*="light-content"]'
+          - 'img[src="moon.png"][alt="moon"][class*="dark-content"]'
+        - []
+---
+
+::: {}
+
+{{< brand logo small >}}
+
+:::
diff --git a/tests/docs/smoke-all/shortcodes/brand-logo-dark.qmd b/tests/docs/smoke-all/shortcodes/brand-logo-dark.qmd
@@ -13,7 +13,7 @@ _quarto:
     html:
       ensureHtmlElements:
         -
-          - 'img[src="moon.png"]'
+          - 'img[src="moon.png"][class*="dark-content"]'
         - []
 ---
 
diff --git a/tests/docs/smoke-all/shortcodes/brand-logo-fallback-light.qmd b/tests/docs/smoke-all/shortcodes/brand-logo-fallback-light.qmd
@@ -0,0 +1,31 @@
+---
+title: Test brand logo light fallback behavior
+format: html
+brand:
+  dark:
+    logo:
+      small: dark-logo.png
+      medium: dark-medium-logo.png
+      # No light logo specified
+_quarto:
+  tests:
+    html:
+      ensureHtmlElements:
+        - 
+          # When requesting dark mode explicitly, should get dark logo
+          - 'img[src="dark-logo.png"][class*="dark-content"]'
+          # When requesting light mode explicitly (which doesn't exist), should fall back to dark logo but with light-content class
+          - 'img[src="dark-logo.png"][class*="light-content"]'
+          # When requesting medium size with light mode (doesn't exist), should fall back to dark-medium with light-content class
+          - 'img[src="dark-medium-logo.png"][class*="light-content"]'
+        - []
+---
+
+### Dark Logo (Dark Mode)
+{{< brand logo small dark >}}
+
+### Dark Logo (Light Mode - should fall back)
+{{< brand logo small light >}}
+
+### Medium Logo (Light Mode - should fall back)
+{{< brand logo medium light >}}
diff --git a/tests/docs/smoke-all/shortcodes/brand-logo-fallback.qmd b/tests/docs/smoke-all/shortcodes/brand-logo-fallback.qmd
@@ -0,0 +1,31 @@
+---
+title: Test brand logo dark fallback behavior
+format: html
+brand:
+  light:
+    logo:
+      small: light-logo.png
+      medium: light-medium-logo.png
+      # No dark logo specified
+_quarto:
+  tests:
+    html:
+      ensureHtmlElements:
+        - 
+          # When requesting light mode explicitly, should get light logo
+          - 'img[src="light-logo.png"][class*="light-content"]'
+          # When requesting dark mode explicitly (which doesn't exist), should fall back to light logo but with dark-content class
+          - 'img[src="light-logo.png"][class*="dark-content"]'
+          # When requesting medium size with dark mode (doesn't exist), should fall back to light-medium with dark-content class
+          - 'img[src="light-medium-logo.png"][class*="dark-content"]'
+        - []
+---
+
+### Light Logo (Light Mode)
+{{< brand logo small light >}}
+
+### Light Logo (Dark Mode - should fall back)
+{{< brand logo small dark >}}
+
+### Medium Logo (Dark Mode - should fall back)
+{{< brand logo medium dark >}}
diff --git a/tests/docs/smoke-all/shortcodes/brand-logo-light.qmd b/tests/docs/smoke-all/shortcodes/brand-logo-light.qmd
@@ -13,12 +13,12 @@ _quarto:
     html:
       ensureHtmlElements:
         -
-          - 'img[src="sun.png"]'
+          - 'img[src="sun.png"][class*="light-content"]'
         - []
 ---
 
 ::: {}
 
-{{< brand logo small >}}
+{{< brand logo small light >}}
 
 :::
diff --git a/tests/docs/smoke-all/shortcodes/brand-logo-sizes.qmd b/tests/docs/smoke-all/shortcodes/brand-logo-sizes.qmd
@@ -0,0 +1,27 @@
+---
+title: Test brand logo size variants
+format: html
+brand:
+  logo:
+    small: small-logo.png
+    medium: medium-logo.png
+    large: large-logo.png
+_quarto:
+  tests:
+    html:
+      ensureHtmlElements:
+        -
+          - 'img[src="small-logo.png"]'
+          - 'img[src="medium-logo.png"]'
+          - 'img[src="large-logo.png"]'
+        - []
+---
+
+### Small Logo
+{{< brand logo small >}}
+
+### Medium Logo
+{{< brand logo medium >}}
+
+### Large Logo
+{{< brand logo large >}}
diff --git a/tests/docs/smoke-all/shortcodes/brand-logo-unified-brand-nodark.qmd b/tests/docs/smoke-all/shortcodes/brand-logo-unified-brand-nodark.qmd
@@ -9,8 +9,9 @@ _quarto:
     html:
       ensureHtmlElements:
         -
-          - 'img[src="sun.png"]'
-        - []
+          - 'img[src="sun.png"][class*="light-content"]'
+        -
+          - 'img[class*="dark-content"]'
 ---
 
 
diff --git a/tests/docs/smoke-all/shortcodes/brand-logo-unified-brand.qmd b/tests/docs/smoke-all/shortcodes/brand-logo-unified-brand.qmd
@@ -0,0 +1,23 @@
+---
+title: Test brand light/dark shortcodes
+format: html
+brand:
+  logo:
+    small: sun.png
+  color:
+    background:
+      light: '#fff'
+      dark: '#000'
+_quarto:
+  tests:
+    html:
+      ensureHtmlElements:
+        -
+          - 'img[src="sun.png"][class*="light-content"]'
+          - 'img[src="sun.png"][class*="dark-content"]'
+        - []
+---
+
+
+{{< brand logo small >}}
+
diff --git a/tests/docs/smoke-all/shortcodes/moon.png b/tests/docs/smoke-all/shortcodes/moon.png
diff --git a/tests/docs/smoke-all/shortcodes/sun.png b/tests/docs/smoke-all/shortcodes/sun.png

Original file line number	Diff line number	Diff line change
`@@ -13,7 +13,7 @@ _quarto:`
`13`	`13`	`html:`
`14`	`14`	`ensureHtmlElements:`
`15`	`15`	`-`
`16`		`- - 'img[src="moon.png"]'`
	`16`	`+ - 'img[src="moon.png"][class*="dark-content"]'`
`17`	`17`	`- []`
`18`	`18`	`---`
`19`	`19`