typst: dark callouts

mix callout title color whenever there is a brand background color
different mixing for light (15%) and dark (50%) modes

set callout body background color to brand background color

Author: gordonwoodhull

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.
+:::
+