typst: dark callout fixes

news/changelog-1.7.md

@@ -97,6 +97,7 @@ All changes included in 1.7:
 ## `typst` format
 
 - ([#12387](https://github.com/quarto-dev/quarto-cli/pull/12387)): `brand-mode` chooses whether to use `light` (default) or `dark` brand yml.
+- ([#12825](https://github.com/quarto-dev/quarto-cli/issues/11825)): Callouts look better with dark brands, mixing the title color and using brand background color for body.
 - ([#11578](https://github.com/quarto-dev/quarto-cli/issues/11578)): Typst column layout widths use fractional `fr` units instead of percent `%` units for unitless and default widths in order to fill the enclosing block and not spill outside it.
 - ([#11676](https://github.com/quarto-dev/quarto-cli/pull/11676)): Convert unitless image widths from pixels to inches for column layouts.
 - ([#11835](https://github.com/quarto-dev/quarto-cli/issues/11835)): Take markdown structure into account when detecting minimum heading level.

src/resources/filters/customnodes/callout.lua

@@ -252,14 +252,27 @@ function _callout_main()
       icon = attrs.fa_icon_typst
     end
     local brand = param("brand")
-    local brandMode = 'light'
+    local brandMode = param('brand-mode') or 'light'
     brand = brand and brand[brandMode]
+    body_background_color = "white"
     if brand then
       local color = brand.processedData and brand.processedData.color
-      if color and callout_theme_color_map[callout.type] and
+      if color then
+        if callout_theme_color_map[callout.type] and
           color[callout_theme_color_map[callout.type]] then
-        background_color =  "brand-color-background." .. callout_theme_color_map[callout.type]
-        icon_color = "brand-color." .. callout_theme_color_map[callout.type]
+          background_color =  "brand-color-background." .. callout_theme_color_map[callout.type]
+          icon_color = "brand-color." .. callout_theme_color_map[callout.type]
+        elseif color.background then
+          local brandPercent = 15
+          if brandMode == 'dark' then
+            brandPercent = 50
+          end
+          local bkPercent = 100 - brandPercent
+          background_color = 'color.mix((' .. icon_color .. ', ' .. brandPercent .. '%), (brand-color.background, ' .. bkPercent .. '%))'
+        end
+        if color.background then
+          body_background_color = "brand-color.background"
+        end
       end
     end
     if callout.attr.identifier == "" then
@@ -271,7 +284,8 @@ function _callout_main()
         )},
         { "background_color", pandoc.RawInline("typst", background_color) },
         { "icon_color", pandoc.RawInline("typst", icon_color) },
-        { "icon", pandoc.RawInline("typst", "" .. icon .. "()")}
+        { "icon", pandoc.RawInline("typst", "" .. icon .. "()")},
+        { "body_background_color", pandoc.RawInline("typst", body_background_color)}
       })
     end
 
@@ -281,7 +295,8 @@ function _callout_main()
        },
       { "background_color", pandoc.RawInline("typst", background_color) },
       { "icon_color", pandoc.RawInline("typst", icon_color) },
-      { "icon", pandoc.RawInline("typst", "" .. icon .. "()")}
+      { "icon", pandoc.RawInline("typst", "" .. icon .. "()")},
+      { "body_background_color", pandoc.RawInline("typst", body_background_color)}
     })
 
     local category = crossref.categories.by_ref_type[refType(callout.attr.identifier)]

src/resources/filters/quarto-post/typst-brand-yaml.lua

@@ -82,7 +82,16 @@ function render_typst_brand_yaml()
           end
           local themebk = {}
           for name, _ in pairs(brandColor) do
-            themebk[name] = 'brand-color.' .. name .. '.lighten(85%)'
+            if brandColor.background then
+              local brandPercent = 15
+              if brandMode == 'dark' then
+                brandPercent = 50
+              end
+              local bkPercent = 100 - brandPercent
+              themebk[name] = 'color.mix((brand-color.' .. name .. ', ' .. brandPercent .. '%), (brand-color.background, ' .. bkPercent .. '%))'
+            else
+              themebk[name] = 'brand-color.' .. name .. '.lighten(85%)'
+            end
           end
           local decl = '#let brand-color-background = ' .. to_typst_dict_indent(themebk)
           quarto.doc.include_text('in-header', decl)

src/resources/formats/typst/pandoc/quarto/definitions.typ

@@ -145,7 +145,7 @@
 }
 
 // 2023-10-09: #fa-icon("fa-info") is not working, so we'll eval "#fa-info()" instead
-#let callout(body: [], title: "Callout", background_color: rgb("#dddddd"), icon: none, icon_color: black) = {
+#let callout(body: [], title: "Callout", background_color: rgb("#dddddd"), icon: none, icon_color: black, body_background_color: white) = {
   block(
     breakable: false, 
     fill: background_color, 
@@ -164,7 +164,7 @@
         block(
           inset: 1pt, 
           width: 100%, 
-          block(fill: white, width: 100%, inset: 8pt, body))
+          block(fill: body_background_color, width: 100%, inset: 8pt, body))
       }
     )
 }

tests/docs/smoke-all/typst/brand-yaml/color/posit-duobrand/brand-color-light-dark.qmd

@@ -0,0 +1,43 @@
+---
+title: Branding - Colors
+brand:
+  light: posit-light.yml
+  dark: posit-dark.yml
+format:
+  typst:
+    brand-mode: dark
+    keep-typ: true
+_quarto:
+  tests:
+    typst:
+      ensureTypstFileRegexMatches:
+        -
+          - 'burgundy: rgb\("#9a4665"\),'
+          - 'primary: rgb\("#447099"\),'
+          - 'primary: color.mix\(\(brand-color\.primary\, 50%\), \(brand-color\.background, 50%\)\),'
+          - 'background_color: (\r\n?|\n)color\.mix\(\(rgb\("#FC5300"\), 50%\), \(brand-color\.background, 50%\)\)'
+          - 'title: (\r\n?|\n)\[(\r\n?|\n)Note(\r\n?|\n)\](\r\n?|\n), (\r\n?|\n)background_color: (\r\n?|\n)brand-color-background.primary'
+          - 'title: (\r\n?|\n)\[(\r\n?|\n)Warning(\r\n?|\n)\](\r\n?|\n), (\r\n?|\n)background_color: (\r\n?|\n)brand-color-background.warning'
+        - []
+---
+
+::: {.callout-note}
+This is a `note` callout.
+:::
+
+::: {.callout-warning}
+This is a `warning` callout.
+:::
+
+::: {.callout-important}
+This is an `important` callout.
+:::
+
+::: {.callout-tip}
+This is a `tip` callout.
+:::
+
+::: {.callout-caution}
+This is a `caution` callout.
+:::
+

tests/docs/smoke-all/typst/brand-yaml/color/posit-duobrand/brand-color-light-light.qmd

@@ -0,0 +1,42 @@
+---
+title: Branding - Colors
+brand:
+  light: posit-light.yml
+  dark: posit-dark.yml
+format:
+  typst:
+    keep-typ: true
+_quarto:
+  tests:
+    typst:
+      ensureTypstFileRegexMatches:
+        -
+          - 'burgundy: rgb\("#9a4665"\),'
+          - 'primary: rgb\("#447099"\),'
+          - 'primary: color\.mix\(\(brand-color\.primary, 15%\), \(brand-color\.background, 85%\)\),'
+          - 'background_color: (\r\n?|\n)color\.mix\(\(rgb\("#FC5300"\), 15%\), \(brand-color\.background, 85%\)\)'
+          - 'title: (\r\n?|\n)\[(\r\n?|\n)Note(\r\n?|\n)\](\r\n?|\n), (\r\n?|\n)background_color: (\r\n?|\n)brand-color-background.primary'
+          - 'title: (\r\n?|\n)\[(\r\n?|\n)Warning(\r\n?|\n)\](\r\n?|\n), (\r\n?|\n)background_color: (\r\n?|\n)brand-color-background.warning'
+        - []
+---
+
+::: {.callout-note}
+This is a `note` callout.
+:::
+
+::: {.callout-warning}
+This is a `warning` callout.
+:::
+
+::: {.callout-important}
+This is an `important` callout.
+:::
+
+::: {.callout-tip}
+This is a `tip` callout.
+:::
+
+::: {.callout-caution}
+This is a `caution` callout.
+:::
+

tests/docs/smoke-all/typst/brand-yaml/color/posit-duobrand/posit-dark.yml

@@ -0,0 +1,20 @@
+color:
+  palette:
+    blue: "#447099"
+    orange: "#EE6331"
+    gray: "#404041"
+    white: "#FFFFFF"
+    teal: "#419599"
+    green: "#72994E"
+    burgundy: "#9A4665"
+  foreground: "#FFFFFF"
+  background: "#151515"
+  primary: "#447099"
+  secondary: "#707073"
+  tertiary: "#C2C2C4"
+  success: "#72994E"
+  info: "#419599"
+  warning: "#EE6331"
+  danger: "#9A4665"
+  light: "#FFFFFF"
+  dark: "#404041"

tests/docs/smoke-all/typst/brand-yaml/color/posit-duobrand/posit-light.yml

@@ -0,0 +1,20 @@
+color:
+  palette:
+    blue: "#447099"
+    orange: "#EE6331"
+    gray: "#404041"
+    white: "#FFFFFF"
+    teal: "#419599"
+    green: "#72994E"
+    burgundy: "#9A4665"
+  foreground: "#151515"
+  background: "#FFFFFF"
+  primary: "#447099"
+  secondary: "#707073"
+  tertiary: "#C2C2C4"
+  success: "#72994E"
+  info: "#419599"
+  warning: "#EE6331"
+  danger: "#9A4665"
+  light: "#FFFFFF"
+  dark: "#404041"

tests/docs/smoke-all/typst/brand-yaml/color/posit/brand-color.qmd

@@ -10,7 +10,7 @@ _quarto:
         -
           - 'burgundy: rgb\("#9a4665"\),'
           - 'primary: rgb\("#447099"\),'
-          - 'primary: brand-color\.primary\.lighten\(85%\),'
+          - 'primary: color\.mix\(\(brand-color\.primary, 15%\), \(brand-color\.background, 85%\)\),'
           - 'title: (\r\n?|\n)\[(\r\n?|\n)Note(\r\n?|\n)\](\r\n?|\n), (\r\n?|\n)background_color: (\r\n?|\n)brand-color-background.primary'
           - 'title: (\r\n?|\n)\[(\r\n?|\n)Warning(\r\n?|\n)\](\r\n?|\n), (\r\n?|\n)background_color: (\r\n?|\n)brand-color-background.warning'
         -